The jquery hide method only hides the div for a second, but then the div automatically appears

Question

I seem to have the same problem as the previous one. I want to hide all the divs that are by default and display only one. Then the user can click on the side tab to display another. The problem is that divs are only hidden for a second after the page loads, but reappear shortly afterwards. This is the code that would suggest hiding the page divs and displaying only the div with the id "pple":

$("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>

Thanks for any answer.

Answer 1

You need return false;in your handler for the item <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/

Answer 2

, divs        ...function(event) event.preventDefault()...