jquery - seleccionada - cambiar el color de la pestaña del menú seleccionado

menu activo jquery

Question

Agarré este fragmento de otra pregunta:

<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>

Lo último que quería era restaurar las pestañas css normales cuando se hace clic en otra pestaña. Por ejemplo, los bgcolors de la pestaña son blancos cuando hago clic en tab1, se pone negro cuando entro a Tab2 ... Tab1 se pone blanco y Tab2 se vuelve negro

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

digamos que aquí está la parte de 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

En realidad, puede simplificar enormemente su Javascript para esto. Esto debería lograr el efecto deseado.

<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>

El Javascript aquí hará lo siguiente:

• Agrega la clase "mouseover" cuando cierras un enlace
• Elimina la clase "mouseover" cuando ya no cierras un enlace
• Cuando haces clic en un enlace, alternará la clase "hecha clic" y la eliminará de cualquier otro enlace que pueda haber tenido la clase; esto restaurará tus otras pestañas a su estado "normal".

Answer 2

Es posible lograr lo que estás buscando usando solo CSS:

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

Manifestación

Answer 3

@wsanville

¿Qué pasa con el problema de hacer doble clic en la misma pestaña?

Si elimino un borde inferior de una pestaña (que indica el seleccionado) cuando hago clic en una pestaña, está bien. Pero cuando vuelvo a hacer clic, debería permanecer así (sin borde inferior), pero debido a la función de alternar ahora parece que no has seleccionado la pestaña, pero sigues ahí.