[英]how do i add class to a div?
这是我的点击功能。
function toggleActiveClass(e){
console.log(e);
}
这是我称之为功能的地方
<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark">
这是它在控制台中返回的输出
<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark">
<li>
<div class="menu-item menu-item--google menu-item--radio">
<span>...</span>
<span class="va-middle">
Personal info
</span>
</div>
</li>
</a>
我想在这个锚标签里面的div标签中添加类“active”。
<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark">
<li>
<div class="menu-item menu-item--google menu-item--radio active">
<span>...</span>
<span class="va-middle">
Personal info
</span>
</div>
</li>
</a>
试过用这个
function toggleActiveClass(e){
e.target.childNodes[1].addClass("active");
}
但它不起作用。 如何将类激活添加到div? 使用javascript。
它不起作用,因为addClass
不是DOM节点的方法。
您需要更改班级列表:
function toggleActiveClass(link) { let div = link.querySelector('.menu-item'); div.classList.toggle('active'); }
.active { color:red; }
<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark"> <li> <div class="menu-item menu-item--google menu-item--radio"> <span>...</span> <span class="va-middle"> Personal info </span> </div> </li> </a>
我有其他div与活动类我想从该div中删除活动类?
我必须知道文档结构的其余部分,但猜测:
function toggleActiveClass(link)
{
let currentActive = document.querySelector('.menu-item .active');
currentActive.classList.remove('active');
let newActive = link.querySelector('.menu-item');
newActive.classList.add('active');
}
首先,您this
传递给没有target
的函数。 要获取目标属性,您必须传递event
。 然后addClass()
是一个jQuery方法,要在vanilla JS中添加类,你应该使用classList.add()
。 虽然您应该像以下方式一样使用toggle()
:
function toggleActiveClass(el){ //el.querySelector('div').classList.add("active"); el.querySelector('div').classList.toggle("active"); }
.active{ color:red; }
<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark"> <li> <div class="menu-item menu-item--google menu-item--radio"> <span>...</span> <span class="va-middle"> Personal info </span> </div> </li> </a>
而不是这个传递事件
<a href="#" onclick="toggleActiveClass(event)" class="link--no-decor link--dark">
这将解决问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.