changement de couleur de l'onglet de menu sélectionné

Question

Je saisi cet extrait d'une autre question:

<script type='text/javascript' > 
$(document).ready(function() { 
$("div.content ul li a") 
.mouseover(function() { 
    var t = $(this); 
    if (!t.hasClass("clicked")) { // very easy to check if element has a set of styles 
    t.addClass('mouseover'); 
    } 
}) 
.mouseout(function() { // attach event here instead of inside mouse over 
    $(this).removeClass('mouseover'); 
}); 

$("div.content ul li a").click(function() { 
    var t = $(this); 
    t.toggleClass("clicked"); 
    if (t.hasClass("clicked")) { 
    t.removeClass('mouseover'); 
    } else { 
    t.addClass('mouseover'); 
    } 
}); 
}); 
</script> 

La dernière chose que je voulais est de restaurer les onglets normal lorsque css un autre onglet est cliqué. Par exemple, sont blancs lorsque je clique sur tab1 il devient noir quand je vais dans Tab2..Tab1 va blanc et Tab2 devient noir

<ul> 
<li> 
    <a href="#Tab1">Tab 1</a> 
</li> 
<li> 
    <a href="#Tab2">Tab 2</a> 
</li> 
</ul> 

disons est ici la partie CSS

ul li a {background-color: white;} 
ul li a.mouseover {background-color: black;} 
ul li a.mouseout {background-olor: white;} 
ul li a.clicked {background-color: black;} 

Answer 1

les bgcolors de l'onglet Vous pouvez réellement grandement simplifier votre Javascript pour cela. Cela devrait atteindre l'effet désiré.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("div.content ul li a") 
     .mouseover(function() { 
      $(this).addClass('mouseover'); 
     }) 
     .mouseout(function() { 
      $(this).removeClass('mouseover'); 
     }); 

     $("div.content ul li a").click(function(e) { 
      e.preventDefault(); //prevent the link from actually navigating somewhere 
      $(this).toggleClass("clicked"); 
      $("div.content ul li a").not(this).removeClass("clicked"); //remove the clicked class from all other elements 
     }); 
    }); 
</script> 

Le Javascript ici va faire ce qui suit:

• Ajouter le « mouseover » classe lorsque vous survolez un lien
• Retirez la classe « mouseover » lorsque vous ne passez plus un lien
• Lorsque vous cliquez sur un lien, celui-ci bascule la classe "cliquée" et la supprime de tout autre lien pouvant contenir la classe, ce qui rétablit l'état "normal" de vos autres onglets.

Answer 2

Il est possible d'obtenir ce que vous cherchez en utilisant seulement CSS:

ul li a {background-color: white;} 
ul li a:hover {background-color: black;} 
ul li a:focus {background-color: black;} 

Demo

Answer 3

@wsanville

Qu'en est-il du problème de la double-cliquant sur le même onglet?

Si je supprime une bordure inférieure d'une languette (indiquant la sélection) lorsqu'on clique sur un onglet, c'est bien. Mais quand je le clique à nouveau, ça devrait rester comme ça (pas de bordure du bas), mais à cause de la bascule maintenant, on dirait que vous n'avez pas sélectionné l'onglet mais vous êtes toujours là.