jquery hide方法只隐藏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/