3

ID が 1 ～ 3 の代替 div 間で、ユーザーが対応するリンクをクリックしたときに、各 div 間の可視性を表示するにはどうすればよいですか? 一度に表示される div は 1 つだけです。ありがとう。

<a>Link 1</a><br>
<a>Link 2</a><br>
<a>Link 3</a><br>

<div id="1">
    <p align="left">Content 1</p>
    </p>
</div>
<div id="2">
    <p align="left">Content 2</p>
    </p>
</div>
<div id="3">
    <p align="left">Content 3</p>
    </p>
</div>
4

1 に答える 1

5

リンクにIDを追加して、イベントハンドラーを追加できるようにします。リンクIDをLink1、Link2、Link3に設定したとすると、次のコードを使用してイベントハンドラーを接続します。

$("#Link1").bind("click", function() {
   $("#1").show();
   $("#2").hide();
   $("#3").hide();
});

上記の他のリンク（2および3）のイベントハンドラーをコーディングし、対応するdivを表示し、他のリンクを非表示にするようにロジックを調整します。

より堅牢なソリューション：

<a class="myLink" divId="1">Link 1</a>

$(".myLink").bind("click", function() {
   $(".myDiv").hide();
   var divId = $(this).attr("divId");
   $("#" + divId).show();
});

クラス「myDiv」をすべてのdivに追加し、クラス「myLink」をすべてのリンクに追加するとします。

実例： http： //jsfiddle.net/8XZKx/1/

于 2012-07-26T19:05:50.520 に答える