jquery - Jquery 加载一个 div onclick 事件

Question

默认情况下，将加载第一个 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();
     });
 });​

现在，当你点击一个，它会加载，但如果你点击两个它不会加载，我正在使用second.hide()，如何让它工作？

Answer 1

您当前绑定到每次a单击，然后显示与单击的链接相对应li的链接，但您始终 hide #second，无论是否.second被单击。

您可以单独绑定它们：

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

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

演示

或者，如果您想在一个侦听器中同时解决这两个问题：

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

演示