Question

我正在创建一个网页并有一个我想要链接的部分，虽然我想要允许用户复制和粘贴一些文本（即他们需要能够突出显示））。因为文本在链接的div中，但我无法选择它，如何使文本可选？

这是我的代码......

<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中，但这只是改变了光标，它实际上并没有使文本可选...

.selectable-text{
    cursor:text;
}

提前感谢您的帮助。

Answer 1

a-Elements不允许其中的块元素。因此，您无法以这种方式构建布局。那么只将标题作为链接呢？那没关系，你可以轻松选择其他文字：

<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，这可以非常轻松地完成：

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

与此相比，“真实”链接的不同之处在于它不会被拖动而是可以选择。无论如何，你可以点击它，它会找到你想去的地方。它还将应用一个类.link，您可以在样式表中使用它，以便将指针设置为光标。

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

使链接div中的文本可选

1 个答案: