使用jQuery显示/隐藏div,然后在该div内显示/隐藏div
我有一系列嵌套在div内的链接。当点击其中一个链接时,我想隐藏带有点击链接的div并显示另一个div。然后,如果在该div内单击链接,我想将div更改为另一个div。使用jQuery显示/隐藏div,然后在该div内显示/隐藏div
的HTML如下:
<div id="main">
<div class="item"><a href="">Link to div A</a></div>
<div class="item"><a href="">Link to div B</a></div>
<div class="item"><a href="">Link to div C</a></div>
</div>
<div id="a" style="display:none;">Link to div <a href="">B</a> and <a href="">C</a></div>
<div id="b" style="display:none;">Link to div <a href="">A</a> and <a href="">C</a></div>
<div id="c" style="display:none;">Link to div <a href="">A</a> and <a href="">B</a></div>
我得到一点点与jQuery的这一个绊倒了。有没有人有任何建议,如何让这与jQuery的工作?显示/隐藏div似乎是直截了当的,但在div内再次做到这一点让我感到困惑。
谢谢!
不知道这是否正是你以后,但我把这个jsFiddle放在一起让你看看。请参阅here。
我增加了一些更改,以便您可以识别哪些锚是指其格,所以我的HTML如下所示:
<div id="main">
<div class="item"><a href="#" name="a">Link to div A</a></div>
<div class="item"><a href="#" name="b">Link to div B</a></div>
<div class="item"><a href="#" name="c">Link to div C</a></div>
</div>
<div class="item" id="a" style="display:none;">
Link to div <a href="#" name="b">B</a> and <a href="#" name="c">C</a>
</div>
<div class="item" id="b" style="display:none;">
Link to div <a href="#" name="a">A</a> and <a href="#" name="c">C</a>
</div>
<div class="item" id="c" style="display:none;">
Link to div <a href="#" name="a">A</a> and <a href="#" name="b">B</a>
</div>
然后,只是一个简单的使用jQuery的,它似乎为你工作”已经描述过。看看我制作的jsFiddle,让我知道如果这就是你的追求。
$(document).ready(function() {
// Hook up the first divs
$(".item a").click(function() {
// Get the target from the name of the anchor
var targetDiv = $(this).attr("name");
// Show the new div and hide the parent div
$("#" + targetDiv).css("display", "");
$(this).parents("div:last").css("display", "none");
});
});
谢谢 - 这基本上是我在找的东西。我似乎无法解决的唯一问题是,当我将所有内容都包含在另一个div中时,这不再起作用。例如:http://jsfiddle.net/qsUVZ/3/任何线索为什么会发生这种情况?再次感谢。 – Peachy 2010-07-06 21:33:45
它会隐藏所有内容,因为我使用“div:last”作为选择器来查找第一个父div。这是一个解决方案:http://jsfiddle.net/qsUVZ/4/。我为每个应该隐藏的div添加了一个类,名为“hide”。所以每次点击链接时,它都隐藏了该类的所有div,然后只显示所需的div。 – GenericTypeTea 2010-07-07 07:46:59
啊,呃。非常感谢! – Peachy 2010-07-07 15:35:06
你可以发布你到目前为止?它会帮助你避免任何人为你做所有的工作:) – HurnsMobile 2010-07-06 19:11:10