9

ここに少し問題があります。私はと持ってdivいh1, h2 and pます。divをリンクにしたいのですが<a>、divまたはh1、h2、pを単にラップすることはできません。これは正しい方法ではありませんが、div全体をリンクにするにはどうすればよいですか？すべての要素を？にする必要がありspanますか？これにはさらに多くの作業が必要になります

<a href="#" class="link">
    <span class="div">
        <span class="h1"></span>
        <span class="h2"></span>
        <span class="p"></span>
    </span>
</a>

または、JavaScriptを使用する必要があります。

$('.link').click(function(){
   document.location.href='#';
})
4

4 に答える 4

9

これを行うのにJSやjQueryは必要ありません。別の方法は、次のようなことを行うことです。

<div>
    <a href="#"></a>
    <h1>Something</h1>
    <h2>Something else</h2>
    <p>Another something</p>
</div>

<style type="text/css">
    div {
        position: relative;
    }

    div > a {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
    }
</style>

もちろん、CSSセレクターを変更して、影響を与えたいものだけに影響を与えるようにします。もちろん、これの利点は、ユーザーがJSを有効にしていない場合でも、完全に正常に機能することであり、SEOに適しています。

于 2013-01-28T10:58:40.367 に答える
6

元のHTMLが次のようになっていると仮定するとdata、divがクリックされたときにたどるリンクを含むパラメーターを追加する必要があります。

<div class="link" data-url="http://www.google.com">
    <span class="div">
        <span class="h1"></span>
        <span class="h2"></span>
        <span class="p"></span>
    </span>
</div>

click次に、ハンドラーをdiv：にアタッチできます。

$('.link').click(function() {
    window.location.assign($(this).data('url'));
});

最後に、必ずcursorCSSに属性を追加して、divがクリック可能であることを明確にします。

.link { cursor: pointer; }
于 2013-01-28T10:41:47.500 に答える
2 
<div onclick="window.location = 'http://www.abc.com/';" style="cursor:pointer;">

</div>
于 2013-01-28T10:48:36.800 に答える
1

Roryが提案したことを詳しく説明するために、ユーザーがjavascriptを有効にしておらず、検索エンジンのインデックス作成を行っている場合は、div内に実際のリンクを含めるのがよいと思います。

<div class="link">
  <h1><a href="http://www.google.com">Heading One</a></h1>
  <h2>Heading Two</h2>
  <p>Paragraph</p>
</div>

次に、h1リンクを検索し、それをURLとして使用します

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

そしてCSS

.link { cursor:pointer; }
于 2013-01-28T11:00:07.313 に答える