Wie können Sie die Klasse "Active" auf Klick auf ein li-element und entfernen Sie es von anderen zur gleichen Zeit?

Ich versuche ein Menü zu erstellen, in dem ich möchten, ändern Sie die CSS von einem li-element klicken, während zur gleichen Zeit, die CSS von anderen li ' s sollte die gleiche bleiben.

Mein Menü ist:

    <ul id="menu">
    <li><a href="#">Parent 1</a> </li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">non-link item</a></li>
    <li><a href="#">Parent 2</a> </li>
</ul>

und meine jquery hinzufügen von CSS, um das ausgewählte element ist:

 $("#menu li a").click(function() {
    $(this).parent().addClass('selected');

    });

Aber gerade jetzt, ich bin nicht in der Lage zu entfernen die zusätzlichen CSS von einem nicht-markierten element. Gibt es trotzdem kann ich diese umsetzen?

Prüfen Sie das stackoverflow.com/questions/16327080/...

InformationsquelleAutor AppleBud | 2013-12-19

  1. 17

    Versuchen, diese

    $("#menu li a").click(function() {
    $(this).parent().addClass('selected').siblings().removeClass('selected');

    });

    DEMO

    Dank Sridhar. 🙂
    froh, Ihnen zu helfen 🙂

    InformationsquelleAutor Sridhar R

  2. 6

    Versuchen, diese

    $("#menu li a").click(function() {
  $("#menu li").removeClass('selected');
    $(this).parent().addClass('selected');
});

    DEMO

    Vielen Dank... Es hat funktioniert. 🙂

    InformationsquelleAutor Sowmya

  3. 2

    Versuchen, diese, dieses wird immer funktionieren

    $("#menu li a").on('click', function(e){
    $("#menu .active").removeClass('active');
    $(this).parent().addClass('active'); 
    e.preventDefault();
});

    InformationsquelleAutor Wannes

  4. 1

    Du kannst das .Geschwister()

    $("#menu li a").click(function() {
    $(this).parent().addClass('selected').siblings().removeClass('selected');
});

    InformationsquelleAutor Dhaval Marthak

  5. 0
    $("#menu li a").click(function(){
    //Remove active if this does not have active class
    if(!($(this).closest("li").hasClass("active"))){
        $(this).closest("#menu").find("li.active").removeClass('selected');
    }
    $(this).closest("li").addClass('selected');
});

    InformationsquelleAutor Hiral

  6. 0

    Oder für die javascript-freie Ansatz, die Sie verwenden können radio-buttons:

    http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/

    und Verwendung der sibling-Selektor-Stil Sie

    input[type='radio']:checked + label

    DEMO

    InformationsquelleAutor Jan Drewniak

Schreibe einen Kommentar