Entfernen von Klasse und Hinzufügen von Klasse jquery

Question

Ich bin völlig neu auf jquery. Wenn ich auf "Rechnung" klicke, muss ich die Klasse "aktiv und Farbe" von li und ein Tag von "Home" entfernen. Auch die "active und color" -Klassen sollten der "Invoice" von li und einem Tag hinzugefügt werden. Und das gilt auch für das "Logout"

Dies ist mein HTML-Code.

<ul class="nav navbar-nav navbar-right" id="navbarprop"> 
    <li id="home" class="active"> 
     <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a> 
    </li> 
    <li id="invoice"> 
     <a href="Invoice.aspx"><i class="glyphicon glyphicon-list-alt"></i>&nbsp Invoice</a> 
    </li> 
    <li id="logOut"> 
     <a href="#"><i class="glyphicon glyphicon-log-out"></i>&nbsp Log Out </a> 
    </li> 
</ul> 

Entschuldigung für mein Englisch. Dank

Answer 1

var nav = $('#navbarprop'); 
 

 
// Add a click listener to the nav that fires when an anchor within it is clicked. 
 
nav.on('click', 'a', function(event) { 
 
    event.preventDefault(); 
 
    // Remove the classes from the current active elements 
 
    nav.find('li.active').removeClass('active'); 
 
    nav.find('a.color').removeClass('color'); 
 
    // Add the class to current, clicked element(s) 
 
    $(this).addClass('color'); 
 
    $(this).parent().addClass('active'); 
 
});

li.active { 
 
    font-weight: bold; 
 
} 
 
a.color { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav navbar-nav navbar-right" id="navbarprop"> 
 
    <li id="home" class="active"> 
 
    <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a> 
 
    </li> 
 
    <li id="invoice"> 
 
    <a href="Invoice.aspx"><i class="glyphicon glyphicon-list-alt"></i>&nbsp Invoice</a> 
 
    </li> 
 
    <li id="logOut"> 
 
    <a href="#"><i class="glyphicon glyphicon-log-out"></i>&nbsp Log Out </a> 
 
    </li> 
 
</ul>

Answer 2

Dieser Code funktioniert als

$function() { // on document ready function starts 
$('ul li a').click(function(event) { // click event function starts 
    event.preventDefault(); // Prevent default action 
    $('li').removeClass('active'); // remove class all li classes which contains active 
    $(this).parent().addClass('active'); // add class current clicked like class active 
}); // click event function ends 
}); // Dom ready function ends 

Glücklich Coding erwartet ....

Answer 3

wie die Sie interessieren ..

<ul class="nav navbar-nav navbar-right" id="navbarprop"> 
    <li id="home" class="active className"> 
     <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a> 
    </li> 
    <li id="invoice" class="className"> 
     <a href="Invoice.aspx"><i class="glyphicon glyphicon-list-alt"></i>&nbsp Invoice</a> 
    </li> 
    <li id="logOut" class="className"> 
     <a href="#"><i class="glyphicon glyphicon-log-out"></i>&nbsp Log Out </a> 
    </li> 
</ul> 

Added Klassenname für alle li als gleich und tun Sie die folgenden

$("#navbarprop").on('click', 'a', function(event) { 
     //to romove class active & color 
     $(".className").removeClass("active"); 
     $(".className a").removeClass("color"); 
     //to add class for current angular tag click 
     $(this).parent().addClass("active"); 
     $(this).addClass("color"); 
    });