Question

当我将它们放在多个div中时，它似乎不再起作用了。我错过了什么？感谢

<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();
});

Answer 1

问题是您已将所有div包装在div#second中，然后隐藏该元素。由于他们的父级已隐藏，因此不会显示任何子级别（#one, #two, #three, #four）。

如果您想隐藏所有div，请先尝试

// Optional code to hide all divs
$("div#second > div").hide();

这不是直接相关的，但是作为一个旁边你可以通过改变隐藏你的div的顺序（隐藏它们，然后显示它）来放弃你的divs.not(("#" + $(this).attr("class"))).hide();。此外，由于您已将它们存储为divs，因此您也可以直接引用它们。

// Show chosen div, and hide all others
$("li a").click(function () {
    $(divs).hide();
    $("#" + $(this).attr("class")).show();
});

请参阅更新的小提琴http://jsfiddle.net/HVfaA/190/

Answer 2

只需在点击处理程序中显示您的div，它就会起作用：

$("div#second").show();

DEMO：http://jsfiddle.net/HVfaA/191/

Answer 3

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

jQuery show click on click，隐藏多个嵌套div中的其他内容

3 个答案: