使链接的div中的文本可选 [英] Making text in a linked div selectable

问题描述

我正在创建一个网页，并在本节内部有一个要链接的部分，尽管我有一些文本让我想让用户复制并粘贴（即他们需要能够突出显示它）。由于文本在链接的div中，尽管我无法选择它，所以我如何使文本可选？

I am creating a web page and have a section that I want to be linked, inside this section though I have some text that I want to allow the user to copy and paste from (i.e they need to be able to highlight it). Because the text is inside the linked div though I am unable to select it, how can I make the text selectable?

以下是我拥有的代码...

Here is the code I have...

<a href="http://google.com">
    <div class="container"> 
        <h2>Heading</h2>
        <p class="selectable-text">Text that can be highlighted here</p>
        <p>Other Text</p>
    </div>
</a>

我试过把它放在CSS中，但这只是改变了光标，它没有实际上使文本可选...

I've tried putting this in the CSS, but this just changed the cursor, it didn't actually make the text selectable...

.selectable-text{
    cursor:text;
}

预先感谢您的帮助。

Thanks in advance for any help.

推荐答案

a-Elements不允许其中的块元素。所以你不能以这种方式构建你的布局。只是把标题变成链接呢？这很好，您可以轻松选择其他文本：

a-Elements don't allow block-elements inside of them. So you cannot structure your layout that way. What about only making the heading a link? That would be fine and you could easily select the other text:

<div class="container"> 
    <h2><a href="http://example.com">Heading</a></h2>
    <p>Text that can be highlighted here</p>
    <p>Other Text</p>
</div>

为了使整个容器可点击，您可以将Javascript事件监听器应用于所有容器。如果您已经在使用jQuery，那么可以非常轻松地完成：

In order to make the whole container clickable, you can apply a Javascript Event Listener to all containers. If you are already using jQuery, this can be done very easily:

$('.container').each(function(){
    $(this).on('click', function(){
        location.href = $(this).find('a').attr('href');
    });
}).addClass('link');

这与真实链接的区别在于它不可拖动，而是可选择。无论如何，你可以点击它，它会找到你想要去的地方。它还会应用一个类 .link ，您可以在样式表中使用它来设置指针作为游标。

The difference from this to a "real" link is that it won't be draggable and instead selectable. Anyway you can click on it and it will locate you to where you want to go. It will also apply a class .link which you can use in your stylesheet in order to set a pointer as the cursor.

对于禁用JavaScript的用户，标题中仍会有链接，因此您的网页在每种情况下都可以使用。

For people who have javascript disabled there will still be a link in the heading, so your page stays usable in every case.

这篇关于使链接的div中的文本可选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！