javascript - jquery hide method only hides div for a second but then div reappears automatically - Stack Overflow

admin管理员组

文章数量:1318994

I seem to have same issue as the one I posted before. I want to hide all the divs that are there by default and only display one. Then the user can click on a side tab to display another. Problem is the divs are only hidden for a second after page loads but reappear soon after. This is code that's suppose to hide the divs of the page and only display the div with id of "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 response.

I seem to have same issue as the one I posted before. I want to hide all the divs that are there by default and only display one. Then the user can click on a side tab to display another. Problem is the divs are only hidden for a second after page loads but reappear soon after. This is code that's suppose to hide the divs of the page and only display the div with id of "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 response.

• javascript
• jquery
• hide
• html

Share Improve this question Follow edited Jun 24, 2010 at 11:46 JohnMerlino asked Jun 24, 2010 at 1:31 JohnMerlinoJohnMerlino 3,92844 gold badges6161 silver badges9191 bronze badges 2

• Is this page about.html? It looks like your code is reloading the page, unless you're preventing the anchor from being followed in additional code you haven't posted. – Nick Craver Commented Jun 24, 2010 at 1:35
• no the link is not on about.html. The link belongs to home.html. – JohnMerlino Commented Jun 24, 2010 at 11:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You need to return false; on your handler for the <a> element.

This is because the default behavior of the <a> element is occurring and reloading the page, so you need to disable that behavior.

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

Alternatively, you could call 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./event.preventdefault/

Try to prevent default after the divs are hide so you can do ...function(event) event.preventDefault()...

本文标签：