jQuery를 사용하여 div 표시/숨기기 및 해당 div 내 div 표시/숨기기

Question

div 내에 중첩 된 일련의 링크가 있습니다. 해당 링크 중 하나를 클릭하면 클릭 한 링크로 div를 숨기고 다른 div를 표시하고 싶습니다. 그런 다음 해당 div 내에서 링크를 클릭하면 div를 다른 div로 변경하고 싶습니다.

HTML은 다음과 같습니다 :이 하나에 jQuery를 함께 넘어 조금납니다

<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를 사용하여이 작업을 수행하는 방법에 대한 조언이 있습니까? div 표시/숨기기는 곧바로 진행되지만 div에서 다시 수행하면 혼란 스럽습니다.

감사합니다.

Answer 1

이것이 정확히 무엇인지 궁금한 점이 없지만이 jsFiddle을 함께 사용해 보겠습니다. here을 참조하십시오. 당신이 관련이있는 앵커 식별 할 수 있도록

나는 몇 가지 변경을 추가 할 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"); 

    }); 

});