javascript - 如何将类添加到 div？

Question

这是我的点击函数。

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>

我想像这样在该 anchor 标记内的 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。

Answer 1

它不起作用，因为 addClass 不是 DOM nodes 的方法.

您需要更改类(class)列表:

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?

我必须知道您文档的其余结构，但只能猜测:

function toggleActiveClass(link)
{
  let currentActive = document.querySelector('.menu-item .active');
  currentActive.classList.remove('active');
  let newActive = link.querySelector('.menu-item');
  newActive.classList.add('active');
}