[英]how do i add class to a div?
Here's my on click function. 这是我的点击功能。
function toggleActiveClass(e){
console.log(e);
}
here's where i call the function 这是我称之为功能的地方
<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark">
here's the output it returns in the console 这是它在控制台中返回的输出
<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>
i want to add class "active" in the div tag inside that anchor tag like this. 我想在这个锚标签里面的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>
tried using this 试过用这个
function toggleActiveClass(e){
e.target.childNodes[1].addClass("active");
}
but it didn't work. 但它不起作用。 how do i add the class active to div?
如何将类激活添加到div? using javascript.
使用javascript。
It does not work because addClass
is not a method of DOM nodes . 它不起作用,因为
addClass
不是DOM节点的方法。
You need to change the class list: 您需要更改班级列表:
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>
I have other div with active class i want to remove the active class from that div?
我有其他div与活动类我想从该div中删除活动类?
I'd have to know the rest of your document's structure, but at a guess: 我必须知道文档结构的其余部分,但猜测:
function toggleActiveClass(link)
{
let currentActive = document.querySelector('.menu-item .active');
currentActive.classList.remove('active');
let newActive = link.querySelector('.menu-item');
newActive.classList.add('active');
}
First of all, you are passing this
to the function which does not have target
. 首先,您
this
传递给没有target
的函数。 To get the target property you have to pass event
. 要获取目标属性,您必须传递
event
。 Then addClass()
is a jQuery method, to add class in vanilla JS, you should use classList.add()
. 然后
addClass()
是一个jQuery方法,要在vanilla JS中添加类,你应该使用classList.add()
。 Though you should use toggle()
like the following way: 虽然您应该像以下方式一样使用
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>
Instead of this pass event 而不是这个传递事件
<a href="#" onclick="toggleActiveClass(event)" class="link--no-decor link--dark">
this will solve the issue 这将解决问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.