Javascript 更改列表元素的活动类

我正在尝试更改已单击列表项的“活动”类，但缺少一些内容。以下是我的HTML和jquery的外观：

HTML

---

知道我错过了什么吗？此时我甚至没有检测到活动类…

代码中有很多问题

//from what i can understand you need to change the active class to the clicked li element not just the link2 element
$("#link2").click(function(){

    // additional-menu is not an id it is a class and it is not a descendant of the li element 
    if ($(this).find('#additional-menu li').hasClass('active')) {
        //console.log("Active class seen");
        $(this).find('#additional-menu li').removeClass('active');
        //if you are using a if statement then addClass should be outside the if block
        $(this).addClass('active');
    }
});

试一试

find（）

获取当前匹配元素集中每个元素的后代，通过选择器、jQuery对象或元素进行筛选

你应该使用

$（this）.parent（）同级（“#附加菜单li”）

因为在html结构中，
#link2
标记没有附加菜单li的后代

，所以可以使某些内容非常通用：

<ul class="additional-menu">
    <li class="active"><a href="#l1"> Link1</a></li>
    <li><a href="#l2">Link2</a></li>
    <li><a href="#l3">Link3</a></li>
</ul>

---

您可以将代码最小化为

$('.additional-menu').on('click','li', function(){
   $(this).addClass('active').siblings().removeClass('active');
});

---

演示在

尝试此解决方案：

<ul class="additional-menu">
    <li><a id="link1" href="link1"> Link1</a></li>
    <li><a href="javascript:void(0)" id="link2">Link2</a></li>
    <li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>

.active{
    background-color : red;
}

//on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

HTML:

<ul class="additional-menu">
    <li><a id="link1" href="link1"> Link1</a></li>
    <li><a href="javascript:void(0)" id="link2">Link2</a></li>
    <li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>

.active{
    background-color : red;
}

//on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

jQuery:

<ul class="additional-menu">
    <li><a id="link1" href="link1"> Link1</a></li>
    <li><a href="javascript:void(0)" id="link2">Link2</a></li>
    <li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>

.active{
    background-color : red;
}

//on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

---

您正在运行document.ready的代码吗？我认为您应该从li元素中删除class=“active”。否则，第一个li将始终处于活动状态。然后使用jQuery在click Event上设置活动类。在这种情况下，第一个列表项将始终处于活动状态。因为它是通过内联样式激活的。因此，最好从内联样式中删除它，并使用jquery添加它。