Question

这是我的菜单html如何使用js添加活动类和删除活动类：

<div class="sidenav">
    <a  href="{{url('/home')}}" class="sidemenu"><i class="fa fa-home"></i> 
    </br>Users</a>
    <a href="{{route('user-channel.index')}}" class="sidemenu"><i class="fa 
    fa-plus"></i></br>Channel</a>
</div>

Answer 1

类似的事情应该起作用。

var sideNav = document.querySelector(".sidenav");
sideNav.addEventListener("click", function(e) {
  e.stopPropagation();
  e.preventDefault();

  if (e.target.classList.contains("sidemenu")) {
    for (let i = 0; i <= sideNav.children.length - 1; i++) {
      if (sideNav.children[i].classList.contains("active")) {
        sideNav.children[i].classList.remove("active");
      }
    }
    e.target.classList.add("active");
  }
});

.active {
  color: blue;
  background-color: yellow;
}

a {
  text-decoration: none;
}

<div class="sidenav">
  <a href="" class="sidemenu"><i class="fa fa-home"></i>
			</br>Users</a>
  <a href="" class="sidemenu"><i class="fa 
	    fa-plus"></i></br>Channel</a>
</div>

Answer 2

简而言之，请使用以下内容：

// Get element
var element = document.getElementById("sidenav");

// Add class
element.classList.add("active");

// Remove class
element.classList.remove("active");

关注here，以获取更多信息。

Answer 3

这是怎么做的

const linkList = document.querySelectorAll('.sidemenu');
const link = document.querySelector('.sidemenu');

link.addEventListener('click', e => {
  let $this = e.target;
  linkList.forEach(ele => {
    ele.classList.remove('active');
  });
  $this.classList.add('active');
});

浏览器中的javascript解释器从上到下读取脚本，因此，首先我们通过声明一致变量.sidemenu来获得具有calss linkList的项目列表，然后我们通过声明另一个一致变量{ {1}}在我们内部执行click事件之后，我们声明变量link来引用事件目标（我单击的元素），然后在具有$this类的所有链接上进行循环以删除类{ {1}}，然后在循环之外，在事件块中，我们将.sidemenu类添加到目标（我刚刚单击的元素）

如何使用js添加和删除活动类

3 个答案: