Question

我在导航栏中有5个选项。默认的第一个选项（仪表板）将处于活动状态。当选择第二个选项时，即，（motes）第一和第二选项都被选中。我只想在单击特定选项时选择一个选项。怎么克服这个？

    <nav class="nav-container showNav">
        <ul class="nav-list">
            <li class="list-item dashboard">
            <a href="#"><i class="active menu fa fa-tachometer" aria-hidden="true"> dashboard </i></a>
            </li>
            <li class="list-item motes none-events">
            <a href="#"><i class="menu fa fa-desktop"> motes </i></a>
            </li>
            <li class="list-item network none-events">
            <a href="#"><i class="menu fa fa-usb"> network </i></a>
            </li>
            <li class="list-item sensors none-events">
            <a href="#"><i class="menu fa fa-edge"> sensors </i></a>
            </li>
            <li class="list-item log none-events">
            <a href="#"><i class="menu fa fa-bar-chart"> log </i></a>
            </li>
        </ul>
    </nav>

这是我的jquery

$(document).ready(function() {
    $(".menu").click(function () {
        if (!$(this).hasClass("active")) {
            $(this).addClass("active")
                    .siblings(".menu")
                    .removeClass("active");
        }
    });
    $(".motes").click(function() {
        $(this).siblings(".menu").removeClass("active");
    });
});

Answer 1

试试此代码

$(document).ready(function() {
    $(document).on('click', '.menu',function () {
        $('.menu').removeClass("active");
        $(this).addClass("active");
    });
});

Answer 2

试试这个，

$(document).ready(function() {
$(".menu").click(function () {
    $(this).addClass("active");
    $(".menu").not(this).removeClass("active");
});

});

如何使用当前元素添加活动类并从所有其他元素中删除

2 个答案: