liItem[i].className = 'current';//第一种方式
liItem[i].setAttribute('class','current');//第二种方式
this.className = 'current';//第三种方式
为什么第三种方式可以使点击变色效果实现而第二、三两种方式都会报错呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
body {
position: relative;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
/* ul,li {
margin: 0px;
padding: 0px;
} */
.box {
width: 80vw;
height: 80vh;
}
ul {
width: auto;
height: auto;
margin: 0px;
padding: 0px;
border: none;
list-style-type: none;
background-color: rgba(50,150,150,0.3);
}
li {
display: inline-block;
padding: 4px;
}
.current {
color: #FFFFFF;
background-color: #2AC845;
}
.currentContent {
display: '';
}
.none {
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="nav-list">
<ul>
<li class="current">首页</li>
<li class="">下载</li>
<li>最新资讯</li>
<li>最新资讯</li>
</ul>
</div>
<div class="content">
<p class="">
这是具体内容1
</p>
<p class="none">
这是具体内容2
</p>
<p class="none">
这是具体内容3
</p>
<p class="none">
这是具体内容4
</p>
</div>
</div>
<script type="text/javascript">
var liItem = document.getElementsByTagName('li');
var con = document.querySelector('.content').querySelectorAll('p');
for(var i = 0;i < liItem.length;i ++) {
liItem[i].onclick = function () {
// liItem[i].className = 'current';//第一种方式
// liItem[i].setAttribute('class','current');//第二种方式
this.className = 'current';//第三种方式
}
}
</script>
</body>
</html>
