Как добавить класс в элемент списка и удалить его из предыдущего элемента

Question

Как добавить класс в элемент списка и удалить его из предыдущего элемента

Мне нужно добавить класс orange в список элементов по щелчку и удалить его, когда я нажму на следующий элемент.

Разметка:

  <ul class="navbar-custom clearfix">

       <li><a href="#start"></a></li>

       <li><a href="#description"></a></li>

       <li><a href="#syntax"></a></li>

       <li><a href="#scrollbar"></a></li>

       <li><a href="#rotations"></a></li>

       <li><a href="#rotations-rotated"></a></li>

       <li><a href="#source"></a></li>

       <li><a href="#follow"></a></li>

   </ul>

Сценарий:

$("nav").find("li").click(function () {

        $(this).toggleClass("orange");

    });

471 2

jQuery html

2 ответов:

Comments

Ничего не найдено.

Rajaprabhu Aravindasamy · Accepted Answer · 2016-05-05 12:08:03

Для этого недостаточно toggleClass,

$("nav").find("li").click(function () {
    //remove all the orange class set with the li elements except the current element
    $("li.orange").not($(this).addClass("orange")).removeClass("orange");
    // add class orange to the current element.
});

Демо

Milind Anantwar · Accepted Answer · 2016-05-05 12:11:33

Вот так:

var navlis = $("nav").find("li");
navlis.click(function () {
    navlis.not(this).removeClass("orange");
    $(this).toggleClass("orange");
});