在多个 div 之间切换 jQuery

Question

在 ID 为 1-3 的备用 div 之间，当用户单击相应链接时，如何显示每个 div 之间的可见性？我只希望一次显示一个 div。谢谢。

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