0

内部にさらに div がネストされたクリック可能な div を作成しようとしています。私が理解していることから、アンカー タグ display:block のスタイルを設定すると、ブロック (div) として機能し、その中でクリック可能にしたい div をネストできます。

ただし、それ以上の div をネストし続けることはできないと思います...もしそうなら、なぜですか?

また、これを解決するための最良/最も簡単なソリューションは何でしょうか。理想的にはすべて CSS/HTML ですが、CSS/HTML が本当に不可能な場合は jQuery ソリューションで問題ありません。

とにかく...例：

アンカーが display:block... のスタイルである限り、これは機能します (はい?)。

ここにコードを入力してください

<a>
     <div id='first'>
     </div>
</a>

これは...

ここにコードを入力してください

<a>
     <div id='first'>
          <div id='inside first'>
          </div>
          <div id='inside first 2'>
          </div>
     </div>
</a>

ありとあらゆる助けをいただければ幸いです。ありがとう！

4

4 に答える 4

1

使用している場合はHTML5 Doctype、div要素をラップするためにアンカータグを使用することが有効です。使用していない場合は、次のHTML5 Doctypeことも試すことができます。

div#first {
  cursor: pointer;
}

$('#first').click(function() {
    window.location = 'http://www.example.com'
})
于 2012-06-28T23:25:18.453 に答える
1

2番目のバリアントが機能することを確認してください-http://jsfiddle.net/W5jG8/ さらに深く進むことができます。実際、ネスティングでどれだけ深くできるかには制限がありません。（または、あるかもしれませんが、実際のケースには関係ありません）

ただし、ブロックレベルの要素をHTML5より前の元のインライン要素にネストすることは意味的に正しくありません。<div>1つの解決策は、すべての-sを-sに置き換え<span>、それらをブロックすることです。

または、jQueryで-sを使用<div>して、クリックリスナーをラッパーにアタッチすることもできます-http://jsfiddle.net/W5jG8/

于 2012-06-28T23:24:27.430 に答える
0

最も簡単な方法は、jquery を使用して、次のようにクリック可能にしたい div の ID を指定することです。

$('#div_Id').click(function(){

blablabla...

});

ここにいくつかのドキュメントがあります：http://api.jquery.com/click/

于 2012-06-28T23:19:48.033 に答える
0

アンカー タグ内に div タグを配置することは有効な html ではないため、これを行うべきではありません。あなたの場合、最も簡単なのは、小さな JavaScript を使用して、親 div に次のような単純な onclick イベントを定義することです。

 <div id='first' onclick="javascript:MyRedirectFunction()">
      <div id='inside first'>
      </div>
      <div id='inside first 2'>
      </div>
 </div>

次に、この div がクリック可能であることをユーザーに理解してもらいたい場合は、CSS を使用して、次のようなアンカーのような動作を与えることができます。

div#first{ cursor: pointer; }
div#first:hover{ background-color:#CCCCCC;}
于 2012-06-28T23:58:47.483 に答える