2

当我将它们放在多个 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 单击时显示 div，隐藏其他功能

下面的原始问题：我正在尝试使用包含链接的单独 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();
});
4

3 回答 3

4

问题是您已经将所有 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/

于 2012-11-06T04:39:28.390 回答
2

只需在单击处理程序中显示您的 div 即可：

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

演示：http: //jsfiddle.net/HVfaA/191/

于 2012-11-06T04:42:37.230 回答
0

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

小提琴

于 2012-11-06T21:27:55.327 回答