<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="box">
<ul class="notice-hd">
<li class="btn-selected">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
<div class="notice-bd">
<ul class="selected">
<li>公告1</li>
<li>公告2</li>
<li>公告3</li>
</ul>
<ul>
<li>规则1</li>
<li>规则2</li>
<li>规则3</li>
</ul>
<ul>
<li>论坛1</li>
<li>论坛2</li>
<li>论坛3</li>
</ul>
<ul>
<li>安全1</li>
<li>安全2</li>
<li>安全3</li>
</ul>
<ul>
<li>公益1</li>
<li>公益2</li>
<li>公益3</li>
</ul>
</div>
</div>
<script src="js/js.js"></script>
</body>
</html>
var li = document.querySelectorAll("notice-hd>li");
var ul = document.querySelectorAll("notice-by>ul");
for(var i = 0; i < li.length; i++){
li[i].index=i;
li[i].onmouseover = function () {
for(var j = 0;j <li.length;j++){
li[j].className = "";
ul[j].className = "";
}
this.className = "btn-selected";
ul[this.index].className = "selected";
}
}
这不是报错,是编辑器的语法检查,类似
ESlint
这样的。提示的意思是你定义了
className
这个属性,却从来没有使用过。如果你在下一行加一个
console.log(this.className)
这个提示就消失了