当用户单击另一个链接（如逐步菜单）时，如何添加另一个检查类来替换当前活动类？

Question

每次用户单击导航菜单时，我都通过 jquery 添加了active类。 每次用户执行菜单点击时，如何添加另一个类check ？

我的菜单的行为就像一个逐步菜单。 例如，当用户单击test 1它会将li设置为活动状态。 当用户单击Test 2它会将其设置为活动状态，并且之前的菜单将被check类替换。

像上面的这个示例图像。

这是我的 jquery 代码。 有没有人知道如何更改 Jquery 代码以在上面执行？

HTML

<nav id="sidebar" class="get-qoute-sidebar">

    <ul class="menus">
        <li class="active">
            <a href="#"><span>Test 1</span></a>
        </li>
        <li>
            <a href="#"></i><span>Test 2</span></a>
        </li>
        <li>
            <a href="#"><span>Test 3</span></a>
        </li>
        <li>
            <a href="#"><span>Test 4</span></a>
        </li>
        <li>
            <a href="#"><span>Test 5</span></a>
        </li>
        <li>
            <a href="#"><span>Test 6</span></a>
        </li>
        <li>
            <a href="#"><span>Test 7</span></a>
        </li>
    </ul>
</nav>

查询

$(document).ready(function () {
    //load the functions
    activeSideBar();
});
function activeSideBar() {
    // set active classes on side bar nav li a
    $("body").on("click", 'nav#sidebar.get-qoute-sidebar ul li a', function (e) {
      $('nav#sidebar.get-qoute-sidebar ul li.active').removeClass('active');
  
      var $parent = $(this).parent();
      $parent.addClass('active');
  
      e.preventDefault();
    });
}

Answer 1

请试试这个：

function activeSideBar() {
    // set active classes on side bar nav li a
    $("#sidebar .menus li").on("click", function() {
      $(this).siblings(".active").removeClass("active").addClass("check");
      $(this).addClass("active");
    });
}