jquery複数選択して特定のコンテナに表示

Question

おはよう！ jQueryマルチセレクトに問題があります。 例： 私は5つのリンクとの3つの容器を持っています。特定のリンクが押されるたびにコンテナに表示され、3つのリンクをの3つのコンテナに設定します。私は5つのリンクを持っているので、残りのリンクをクリックすると、コンテナは押されたリンクに従って値を変更します。

HTMLコード：

<a id="link1">Link 1</a> 
<a id="link2">Link 2</a> 
<a id="link3">Link 3</a> 
<a id="link4">Link 4</a> 
<a id="link5">Link 5</a> 

<ul id="container"> 
    <li id="container1>Container 1<li> 
    <li id="container2>Container 2<li> 
    <li id="container3>Container 1<li> 
</ul> 

SCRIPT

$('#container1, #container2, #container3').hide(); 
$('#link1').click(function() { 
    $('#container1').show(); 
}); 
$('#link2').click(function() { 
    $('#container2').show(); 
}); 
$('#link3').click(function() { 
    $('#container3').show(); 
}); 

私はjQueryのではまだ新しいです、私を助けてください。私はあなたの助けに感謝します。前もって感謝します。

Answer 1

私だけやるデモがリンク 上のユーザーのクリックが、それはその後、クリックしたリンクは、リンクの選択に を隠蔽されるコンテナに行くことになるならば、ということである簡単なデモに

を作成。

<a href="#" class="link">Link 1</a> 
<a href="#" class="link">Link 2</a> 
<a href="#" class="link">Link 3</a> 
<a href="#" class="link">Link 4</a> 
<a href="#" class="link">Link 5</a> 

<ul id="container"> 
    <li class="linklist" data-contain = "false" id="container1">Stuff in 1</li> 
    <li class="linklist" data-contain = "false" id="container2">Stuff in 2</li> 
    <li class="linklist" data-contain = "false" id="container3">Stuff in 3</li> 
</ul> 

のjavascript ::

<script> 


$(document).ready(function(){ 

    // hope you are getting the idea 

    // bind event on class link 
    $(document).on('click', '.link', function() { 

    var link = $(this); 
    // get link name 
    var link_name = link.text(); 


    // select container 
    var con = $(".linklist[data-contain=false]").first(); 
     // change the attribute 
     con.attr('data-contain', true); 
     // change the html contain 
     con.html(link_name); 
     // show 
     con.show(); 
     // hide the click link 
     link.hide(); 

     // you can do more.. like create a option that 
     // you can also delete the selected link on the container 
     // list and show the link again to be selected 

    }); 

}); 


</script> 

DEMO HERE