2

我有一系列嵌套在 div 中的链接。单击其中一个链接时，我想隐藏带有单击链接的 div 并显示另一个 div。然后，如果在该 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 中再次这样做让我感到困惑。

谢谢！

4

1 回答 1

2

不确定这是否正是您所追求的，但我整理了这个 jsFiddle 供您查看。见这里。

我添加了一些更改，以便您可以识别哪些锚点与哪个 div 相关，因此我的 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");

    });

});
于 2010-07-06T19:43:51.443 回答