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），而不是点击的元素。

您应该使用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');
}

如何删除活动效果

1 个答案: