jQuery在点击时显示div，在多个嵌套div中隐藏其他
当我将它们放在多个div中时，它似乎不再起作用。我遗漏了什么？谢谢
演示：http://jsfiddle.net/HVfaA/206/
<div id="content">
<div id="first">
<div id="first-1">
<div id="first-2">
<div id="first-3">
<li><a href="#" class="one">One</a></li>
<li><a href="#" class="two">Two</a></li>
<li><a href="#" class="three">Three</a></li>
<li><a href="#" class="four">Four</a></li>
</div>
</div>
</div>
</div>
<div id="second">
<div id="second-1">
<div id="second-2">
<div id="second-3">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>
</div>
</div>
</div>
</div>
$("div#second > div").hide();
var divs = $("#one, #two, #three, #four");
$('li a').on('click', function () {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});此函数是Peter Ajtai jQuery show div on click, hide the others提供的函数的修改版本
下面的原始问题:我尝试使用包含链接的单独div来显示div。当前单击链接时，隐藏的div不会显示。谢谢你的帮助。下面是关于jsfiddle - http://jsfiddle.net/HVfaA/184/的演示
<div id="first">
<li><a href="#" class="one">One</a></li>
<li><a href="#" class="two">Two</a></li>
<li><a href="#" class="three">Three</a></li>
<li><a href="#" class="four">Four</a></li>
</div>
<br /><br />
<div id="second">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</div>
// Optional code to hide all divs
$("div#second").hide();
// Selector
var divs = $("#one, #two, #three, #four");
// Show chosen div, and hide all others
$("li a").click(function ()
{
$("#" + $(this).attr("class")).show();
divs.not(("#" + $(this).attr("class"))).hide();
});回答 3
Stack Overflow用户
发布于 2012-11-06 12:39:28
问题在于，您已经将所有div包装在div#second中，然后隐藏了该元素。因为它们的父级是隐藏的，所以不会显示任何子div (#one, #two, #three, #four)。
如果您想先隐藏所有div，请尝试
// Optional code to hide all divs
$("div#second > div").hide();这不是直接相关的，但顺便说一句，你可以通过改变隐藏divs.not(("#" + $(this).attr("class"))).hide();的顺序(全部隐藏，然后显示一个)来去掉div。此外，由于您已经将它们存储为divs，因此您也可以直接引用它们。
// Show chosen div, and hide all others
$("li a").click(function () {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});请参阅更新的提琴http://jsfiddle.net/HVfaA/190/
Stack Overflow用户
发布于 2012-11-06 12:42:37
只需在你的点击处理程序中显示你的div，它就会工作：
$("div#second").show();演示：http://jsfiddle.net/HVfaA/191/
Stack Overflow用户
发布于 2012-11-07 05:27:55
CSS：
.Main-Div {position: relative; left: -9999px;}
.Inner-Div {position: relative; left: 9999px;}Javascript：
// Optional code to hide all divs
$("div#second > div").addClass('Main-Div');
// Selector
var divs = $("#one, #two, #three, #four");
// Show chosen div, and hide all others
$('li a').on('click', function () {
$(divs).removeClass('Inner-Div');
$("#" + $(this).attr("class")).addClass('Inner-Div');
});Fiddle
https://stackoverflow.com/questions/13244329
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号