javascript - 如何去除主动效果

Question

我正在尝试使用 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>

我的 js 代码放在这里

    var a = document.getElementById('a');
    var b = document.getElementById('b');
    var c = document.getElementById('c');

    a.addEventListener('click',active);
    b.addEventListener('click',active);
    c.addEventListener('click',active);

    function active(){
        this.classList.add('active');
        if(this.className == 'active'){
              this.className = '';
         }
    }

问题是当我单击这些导航栏时，我希望它停用已单击的其他导航栏，并且以某种方式在其他栏上保留事件状态。如果有人能指出我的错误并教我如何实现我的目标，我将非常感激

Answer 1

您盲目地设置了 active 类，然后将其删除(因为 add('active') 将导致 className == 'active')。

此外，您的 this 值可能指向错误的对象(可能是 window)，而不是单击的元素。

您应该使用 eventArgs.currentTarget，而不是使用 this，这样您就可以准确地知道您要定位的元素(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');
}