Javascript 如何消除积极影响

我试图通过使用js删除html中导航栏的活动效果，下面是我的html代码

<nav>
    <div class="container" id="container">
        <ul class="nav nav-tabs">
            <li role="presentation" id="a"><a href="#">a</a>
            </li>   
            <li role="presentation" id="b"><a href="#">b</a>
            </li>
            <li role="presentation" id="c"><a href="#">c</a>
            </li>       
        </ul>
    </div>
</nav>

---

问题是当我点击那些导航条时，我希望它去激活其他已经点击的导航条，而活动状态仍然保持在其他导航条上。如果有人能指出我的错误并教我如何在这里实现我的目标，我将不胜感激

您盲目地将

设置为active

类，但随后将其删除（因为

添加（'active'）

将导致

className='active'

）

此外，

此

值可能指向错误的对象（可能是

窗口

），而不是单击的元素

不要使用

this

，您应该使用

eventArgs.currentTarget

，这样您就可以确切地知道您要定位的元素（

currentTarget

指的是事件侦听器添加到的元素）

像这样：

function onListItemClicked(e) {
    var li = e.currentTarget;

    // Remove 'active' from all other <li> elements first, before setting it on the desired element:
    var lis = document.querySelectorAll('ul.nav.nav-tabs li');
    for( var i = 0; i < lis.length; i++ ) {
        lis[i].classList.remove('active');
    }

    // Add 'active' to only the desired element:
    li.classList.add('active');
}

函数onListItemClicked（e）{
var li=e.currentTarget；
//首先从所有其他
元素中删除“活动”，然后再将其设置到所需元素上：
var lis=document.queryselectoral（'ul.nav.nav-tabs li'）；
对于（变量i=0；i

不相关，但使用

classList.contains

而不是

className==

，因为它在应用多个类名的情况下会起作用。您甚至可以改进选择器，使其只包含实际具有活动类的元素，以避免一些工作：

document.querySelectorAll（'ul.nav.nav-tabs li.active'）

谢谢，您解决了困扰我两天的问题

function onListItemClicked(e) {
    var li = e.currentTarget;

    // Remove 'active' from all other <li> elements first, before setting it on the desired element:
    var lis = document.querySelectorAll('ul.nav.nav-tabs li');
    for( var i = 0; i < lis.length; i++ ) {
        lis[i].classList.remove('active');
    }

    // Add 'active' to only the desired element:
    li.classList.add('active');
}