javascript - jquery 隐藏方法只隐藏 div 一秒钟，然后 div 自动重新出现

Question

我似乎遇到了与我之前发布的问题相同的问题。我想隐藏默认情况下存在的所有 div，只显示一个。然后用户可以单击一个侧面选项卡以显示另一个。问题是 div 在页面加载后仅隐藏一秒钟，但很快就会重新出现。这是假设隐藏页面的 div 并且只显示 id 为“pple”的 div 的代码:

$("a#link2").click(function(){$("#content > div").hide(); $("#pple").show();});

markup:

   home.html:                                           
<li><a href="about.html" id="link2">About</a></li>

about.html:
<div id="content">
 <div class="tabContent" id="pple">
<p>
    Content
<p> 
   </div>

    <div class="tabContent" id="serv">

<p>
    Content
</p>    
  </div>

  <div class="tabContent" id="sol">     

<p>
    Content
</p>    
  </div>            
</div>

感谢您的回复。

Answer 1

您需要 return false;在你的处理程序上 <a>元素。

这是因为 <a> 的默认行为元素正在发生并重新加载页面，因此您需要禁用该行为。

$("a#link2").click(function(){
    $("#content > div").hide(); 
    $("#pple").show();
    return false;  // Will prevent default behavior
                   //   but it also prevents event bubbling
});

或者，您可以调用 event.preventDefault()

$("a#link2").click(function( event ){
    event.preventDefault();  // Prevents the default behavior
                             //    and event bubbling is still intact
    $("#content > div").hide(); 
    $("#pple").show();
});

http://api.jquery.com/event.preventdefault/