使用jQuery显示/隐藏div，然后在该div内显示/隐藏div

Question

我有一系列嵌套在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内再次做到这一点让我感到困惑。

谢谢！

Answer 1

不知道这是否正是你以后，但我把这个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"); 

    }); 

});