3

Webページを作成していて、リンクしたいセクションがありますが、このセクション内には、ユーザーがコピーして貼り付けることができるテキストがあります（つまり、強調表示できる必要があります）。テキストはリンクされた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;
}

助けてくれてありがとう。

4

1 に答える 1

0

a-要素は、それらの内部のブロック要素を許可しません。したがって、そのようにレイアウトを構成することはできません。見出しだけをリンクにするのはどうですか？それは問題なく、他のテキストを簡単に選択できます。

<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を無効にしている場合でも、見出しにリンクが表示されるため、どのような場合でもページは引き続き使用できます。

于 2012-05-02T12:52:48.137 に答える