クラスを削除してクラスjqueryを追加する

Question

jqueryについて全く新しいです。私は "Invoice"をクリックすると、liから "active and color"クラスを削除し、 "Home"のタグを削除する必要があります。また、liとタグの "請求書"に "アクティブな色"のクラスを追加する必要があります。そして、 "ログアウト"に行く

これは私のHTMLコードです。

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

は、このコードは、あなたの期待

$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 

コーディングハッピー....

Answer 3

として働く。このようにしてください。..

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

を0

すべてのliのクラス名を同じものとして追加し、以下を実行します。

$("#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"); 
    });