gpt4 book ai didi

javascript - 如何去除主动效果

转载 作者:行者123 更新时间:2023-12-03 04:19:13 25 4
gpt4 key购买 nike

我正在尝试使用 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 = '';
}
}

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

最佳答案

您盲目地设置了 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');
}

关于javascript - 如何去除主动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44019321/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com