85 lines
2.2 KiB
HTML
85 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
ul,li {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
}
|
||
.title li {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.title .active {
|
||
color: red;
|
||
}
|
||
|
||
.content li {
|
||
display: none;
|
||
}
|
||
|
||
.content .active {
|
||
display: block;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<ul class="title">
|
||
<li class="active">首页</li>
|
||
<li>社会</li>
|
||
<li>军事</li>
|
||
<li>科技</li>
|
||
</ul>
|
||
|
||
<ul class="content">
|
||
<li class="active">首页 的内容</li>
|
||
<li>社会 的内容</li>
|
||
<li>军事 的内容</li>
|
||
<li>科技 的内容</li>
|
||
</ul>
|
||
</body>
|
||
<script>
|
||
var titleLi = _(".title li"),contentLi = _(".content li")
|
||
|
||
//定义一个变量存放所有html里面title content 里面的li
|
||
titleLi.forEach(function(v,i){
|
||
//对titleli 进行遍历 v存放titleli里面的值 i存放的是下标
|
||
v.onclick = function () {
|
||
//对v(titleli里面的值)设置点击事件
|
||
titleLi.forEach(function(value,item){
|
||
//再次对titleli进行遍历 value存放titleli里面的值 item存放的是下标
|
||
|
||
value.className = ""
|
||
//对所有titleli里面的数值class属性设为空值
|
||
contentLi[item].className = ""
|
||
//对所有contentLi里面的数值class属性设为空值（因为下标相对应）
|
||
})
|
||
|
||
v.className = "active"
|
||
//对点击的v设置 active 属性
|
||
contentLi[i].className = "active"
|
||
//因为titleli 和 contentli 里面的下标相对应 所以contentli也可以使用
|
||
//并且给contentli 用下标对应的li 也设置 active 属性
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
function _(className){
|
||
return document.querySelectorAll(className)
|
||
}
|
||
|
||
//querySelectorAll 设置所有元素
|
||
</script>
|
||
</html> |