0

デフォルトでは、最初の div のコンテンツがロードされ、ユーザーがタグをクリックすると、その div のコンテンツがロードされます。

HTML:

    <a class="first">one</a>
    <a class="second">two</a>
    <div>
       <li id="first">
           <h2>pen</h2>
           <div>
               <div>parker</div>
           </div>
      </li>
      <li id="second">
            <h2>car</h2>
            <div>Bugatti</div>
         </div>
       </li>
    </div>​

JS:

$(document).ready(function() {
    $("li#second").html();
    $("li#first").hide();
    $("a").click(function () {         
        var id = $(this).attr("class");  
        $("li#"+id).show().html();          
        $("li#second").hide();
     });
 });​

1 つをクリックするとロードされますが、2 つをクリックするとロードさsecond.hide()れません。

4

1 に答える 1

2

a現在、すべてのクリックにバインドしており、クリックliされたリンクに対応する を表示しますが、クリックされて#secondいるかどうかに関係なく、常に非表示.secondにします。

それらを個別にバインドできます。

$('a.first').click(function() {
    $('#first').show();
    $('#second').hide();
});

$('a.second').click(function() {
    $('#first').hide();
    $('#second').show();
});

デモ

または、1 つのリスナーで両方に対処する場合は、次のようにします。

$('a').click(function() {
   var id = $(this).attr('class');
   $('#first').toggle(id == 'first');
   $('#second').toggle(id == 'second');
});

デモ

于 2012-11-14T12:26:15.103 に答える