您好，首先让我解释一下，我根本没有使用过 jQuery。简单的显示和隐藏以及基本的UI就到此为止了。话虽如此，我试图能够显示一个 div，它实际上是一个已链接到“链接”的“页面”。
标记:
<body>
<!--Footer and Navigation Div's-->
<div id="bg"><img src="images/bg.jpg" alt=""></div>
<div id="footer">
<p>S.E. <span>yoga</span></p>
<div id="nav">
<ul><a href="#">Link 1</a></ul>
<ul><a href="#">Link 2</a></ul>
<ul><a href="#">Link 3</a></ul>
<ul><a href="#">Link 4</a></ul>
</div>
</div>
<!--END Footer and Navigation Div's-->
<div class="parent">
<div class="a">
<p>this is a</p>
</div>
<div class="b">
<p>this is b</p>
</div>
<div class="c">
<p>this is c</p>
</div>
<div class="d">
<p>this is d</p>
</div>
</body>
</html>
jQuery:
/*
$(document).ready(function(){
$('#nav').click(function(){
$(".a").slideToggle();
var divname= this.value;
$("#"+divname).show("slow").siblings().hide("slow");
});
});*/
$(document).ready(function(){
$('.a, .b, .c, .d').hide();
});;
因此，我将使用我使用的第一个脚本(已注释掉)作为起点。第二个脚本，它们都隐藏着，这就是我要去的地方。将它们全部隐藏，然后一次只显示一个。
div 重叠。有什么帮助吗？谢谢!
最佳答案
你可以使用这个
$(document).ready(function(){
$('.parent div').hide(); // hide div's on load using parent class as a starting point
$('#nav a').click(function() { // on the anchor clicks that are inside div with id=nav
var $div = $('.parent div').eq($(this).index('#nav a')); // get the relevant div
$div.show(); // show the relevant div
$('.parent div').not($div).hide(); // hide all but the relevant div
});
}):
编辑:
$('.parent div')//<-- 这会获取具有父类的元素下的所有 div
.eq(index)//将获取给定索引处的元素，如下
$(this)//<-- 当前点击的 anchor 标记
.index('#nav a');//<-- 获取 index()当前 anchor 标记与其他 anchor 标记的比较
奇怪的是我通常使用 $(this).index() 并且它可以工作，但这次不行，所以我必须在索引内指定一个选择器。
还可以将您的 html 修复为如下所示
<div id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
更新了 fiddle
关于jQuery 多个 div 显示一次仅隐藏一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11782201/