Добавить/удалить активный класс для списка ul с помощью jquery?

Я пытаюсь удалить и установить активный класс для элемента списка при каждом нажатии. В настоящее время он удаляет выбранный активный класс, но не устанавливает его. Любая идея, что мне не хватает?

HTML

<ul class="nav nav-list">
  <li class='nav-header'>Test</li>
  <li class="active"><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  <li><a href="page3.php">Page 3</li>
</ul>

JQuery

 $('.nav-list').click(function() {

    //console.log("Clicked");
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

Ответы

Ответ 1

this будет указывать на <ul>, выбранный .nav-list. Вместо этого вы можете использовать делегацию!

$('.nav-list').on('click', 'li', function() {
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

Ответ 2

вы можете использовать siblings и removeClass

$('.nav-link li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

Ответ 3

Попробуйте это,

 $('.nav-list li').click(function() {

    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

В вашем контексте $(this) будет указывать на элемент UL не Li. Следовательно, вы не получаете ожидаемых результатов.

Ответ 4

Я использовал это:

$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');

Так как активный класс находится в элементе <li>, а щелчком является элемент <a>, первая строка удаляет .active из всех <li>, а вторая (опять же, $(this) представляет <a>, который является щелчком элемента) добавляет .active к прямому родительскому элементу, который равен <li>.

Ответ 5

$(document).ready(function(){
    $('.cliked').click(function() {
        $(".cliked").removeClass("liactive");
        $(this).addClass("liactive");
    });
});

.liactive {
    background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul
  className="sidebar-nav position-fixed "
  style="height:450px;overflow:scroll"
>
    <li>
        <a className="cliked liactive" href="#">
            check Kyc Status
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            My Investments
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            My SIP
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            My Tax Savers Fund
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            Transaction History
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            Invest Now
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            My Profile
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            FAQ's
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            Suggestion Portfolio
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            Bluk Lumpsum / Bulk SIP
        </a>
    </li>
</ul>;