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显示为点击的链接，但无论是否隐藏#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');
});

Demo

或者，如果你想在一个监听器中解决这两个问题：

{{1}}

Demo

Jquery加载div onclick事件

1 个答案: