html - Toggle between multiple divs jQuery

Question

Between alternate divs with id's 1-3 how do I show the visability between each one when the user clicks the corresponding link? I only want one div to be shown at a time. Thanks.

<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>

Answer 1

将 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/