La méthode jquery hide ne cache que div pendant une seconde mais ensuite div réapparaît automatiquement

Question

Je semble avoir le même problème que celui que j'ai posté auparavant. Je veux cacher tous les divs qui sont là par défaut et n'en afficher qu'un seul. Ensuite, l'utilisateur peut cliquer sur un onglet latéral pour en afficher un autre. Le problème est que les divs ne sont cachés que pour une seconde après chargement de la page mais réapparaissent peu après. Ceci est du code qui est censé cacher les divs de la page et afficher uniquement le div avec id de « 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> 

Merci pour toute réponse.

Answer 1

Vous avez besoin de return false; sur votre gestionnaire pour l'élément <a>. Cela est dû au fait que le comportement par défaut de l'élément <a> est en train de se produire et que vous rechargez la page. Vous devez donc désactiver ce comportement.

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

Sinon, vous pouvez appeler 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

Essayez d'éviter par défaut après les divs sont cacher vous pouvez donc faire ...function(event) event.preventDefault()...