新H5中DOM对象多了一个classList属性，是一个数组
- add 添加一个新的类名
- remove 删除一个的类名
- contains 判断是否包含一个指定的类名
- toggle 切换一个class element.toggle(‘class-name‘,[add_or_remove])
- toggle函数的第二个参数true为添加 false删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class-list</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
</head>
<body>
<header class="container">
<h1 class="page-header">Element.classList</h1>
</header>
<div class="container">
<nav class="navbar navbar-default">
<a href="#" class="navbar-brand">Itcast</a>
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</div>
<script>
var liElements = document.querySelectorAll(‘.nav > li‘);
//alert(liElement.length);
for(var i=0; i<liElements.length; i++){
liElements[i].addEventListener(‘mouseover‘,function(e){
for(var i=0; i<liElements.length;i++){
liElements.item(i).classList.remove(‘active‘);
}
this.classList.add(‘active‘);
e.stopPropagation();//阻止冒泡,该方法将停止事件的传播,阻止它被分派到其他 Document 节点
e.preventDefault();//方法阻止元素发生默认的行为
})
}
</script>
</body>
</html>
时间： 2024-10-27 05:02:05