使用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"); 

    }); 

});