时间戳

首页 > 解决方案 > 如何将类添加到 div？

javascript - 如何将类添加到 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 标记中添加“活动”类。


<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。

标签： javascripthtmlcss

解决方案

它不起作用，因为它不是DOM 节点addClass的方法。

您需要更改班级列表：

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?

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');
}

推荐阅读