Wie hinzufügen und entfernen Klasse, wenn Benutzer klickt und schweben Sie einen Link

Question

ich eine Liste von Menüpunkten haben, und ich will gleiche Klasse hinzuzufügen, wenn ein Benutzer auf jedem lioder Add Klasse klickt auf schweben li.

Ich habe ein Menüpunkte wie folgt vor:

$('#menu li').click(function() { 
    $('#menu li').not(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

$("#menu li").hover(
       function() { 
        $(this).addClass('active'); 
       }, 
       function() { 
        $(this).removeClass('active'); 
       }); 

http://jsfiddle.net/866pzu47/173/

das Problem ist, wenn Benutzer klickt ‚li‘ die Klasse zum li hinzugefügt, wenn die Maus über das ich brauche die Klasse hinzugefügt entfernen Aufgrund des vorherigen Benutzers klicken oder erneut die aktiven iems hinzugefügt.

Answer 1

Dies ist ein einfacher Weg, es

$('#menu li').click(function() { 
    $('#menu li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$("#menu li").hover(function() { 
    $('#menu li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

jsFiddle Demo

Aber immer noch Ihre Anforderung ist nicht klar, wie viel zu tun haben, auf jsFiddle zu ziehen, so bitte einen Blick und lassen Sie uns wissen, was genau benötigt Sie Mit diesem.

Edited

Ich habe gerade auf verschiedene Klassen ein für Klick aktiv und eine andere für Hover hinzugefügt aktiv, so schweben versuchen und dann klicken, wird unterschiedlich zwischen den beiden Funktionen finden

<script> 
$('#menu li').click(function() { 
    $('#menu li').removeClass('clickactive hoveractive'); 
    $(this).addClass('clickactive'); 
}); 

$("#menu li").hover(function() { 
    $('#menu li').removeClass('hoveractive clickactive'); 
    $(this).addClass('hoveractive'); 
}); 
</script> 

<style> 
.hoveractive{ 
    color:red; 
} 
.clickactive{ 
    color: green; 
} 
</style> 

Here ist eine aktualisierte jsFiddle .

Answer 2

function myfun() { 
    $('#menu li').removeClass('active'); 
    $(this).addClass('active'); 
} 
$('#menu li').click(myfun); 
$("#menu li").hover(myfun); 

wie oben ein, sondern Duplikate nicht halten ...

Answer 3

Dies wird für u arbeiten ..

$(document).ready(function(){ 

    $('#menu li').click(function() { 
    $('#menu li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$("#menu li").hover(function(){ 
    $('#menu li').removeClass('active'); 
    }, function(){ 
    $(this).addClass('active'); 
    }); 
}) 

Answer 4

die Klasse auf klicken und schweben Hinzufügen ist keine gute Idee. Es sieht so aus, als ob Sie versuchen, Funktionalität für Mobilgeräte und Desktops zu haben.

Versuchen Sie, die Doc-Breite und den Ausführungscode abhängig von der Bildschirmgröße zu überprüfen.

var docWidth = $(window).width(); 

if (docWidth <= 767) { 
    $('#menu li').click(function() { 
     $('#menu li').not(this).removeClass('active'); 
     $(this).addClass('active'); 
    }); 
} 
else { 
    $('#menu li').click(function() { 
     $(this).addClass('active'); 
    }, function() {//note add callback function 
     $(this).removeClass('active'); 
    }); 
} 

Answer 5

Sie erkennen nicht, dies aber Ihr $('#menu li').click Ereignis tatsächlich aufgerufen und die Klasse ändert sich aber, wenn man aus dem li schweben die mouseout Wirkung stattfindet, und die active Klasse entfernt wird. Mein Vorschlag ist, eine neue Klasse active1 zu machen, die dasselbe wie active ist, wenn Sie auf ein li klicken, ändert die Farbe nur dieses Mal mit mouseout Effekt wird nicht aktive Klasse von ihm entfernen, da es nicht dort an erster Stelle war.

  $("#menu li").click(function() { 
       $("#menu li").not(this).removeClass("active1"); 
       $(this).addClass("active1"); 
      }); 

      .active1{ 
       color: red; 
      } 

Answer 6

, wenn Sie schweben wollen, aber die active Klasse noch dort können Sie diese benutzen und Sie können auch Skriptfunktion zu reduzieren.

$('#menu li').click(function() { 
 
    $('#menu li').not(this).removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

li{ 
 

 
    color: blue; 
 
} 
 
li:hover{ 
 

 
    color: red; 
 
} 
 
.active{ 
 
    color:red; 
 
    //background-image:''; 
 
    } 
 
.active{ 
 
    color:red; 
 
    //background-image:''; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="menu"> 
 
<li>one</li> 
 
<li>one</li> 
 
<li>one</li> 
 

 
</ul>

Answer 7

Versuchen Sie eine andere CSS-Klasse mit dem Namen „geklickt“ erstellen und diese Klasse auf klicken und aktiv auf schweben hinzufügen.

$('#menu li').click(function() { 
    //alert("chala BC"); 
$('#menu li').not(this).removeClass('clicked'); 
$(this).addClass('clicked'); 
}); 

$("#menu li").hover(
      function() { 
       $(this).addClass('active'); 
      }, 
      function() { 
       $(this).removeClass('active'); 
      });