在多个div之间切换jQuery

Question

在具有ID 1-3的交替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>

- Daniel Kellaway

Answer 1

给你的链接添加id，以便可以添加事件处理程序。假设您将链接id设置为Link1、Link2、Link3，请使用以下代码连接事件处理程序：

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

请编写上述事件处理程序，使其适用于其他链接（2和3），调整逻辑以显示相应的div并隐藏其他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/

- SimulatedBones

---

谢谢，唯一的问题是如果我想将div的数量扩展到20个或更多，那么就会有很多重复的代码。 - Daniel Kellaway

我喜欢$(".myDivs").hide()的想法，你有一个快速的工作示例吗？ - Daniel Kellaway

太棒了！谢谢SimulatedBones，正是我想要的。 - Daniel Kellaway