65 lines
1.9 KiB
HTML
65 lines
1.9 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>
|
||
.a{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.color{
|
||
color: red;
|
||
}
|
||
.b li{
|
||
display: none;
|
||
}
|
||
.show{
|
||
display: inline-block !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div>
|
||
<ul class="a">
|
||
<li class="color">推荐</li>
|
||
<li>游戏</li>
|
||
<li>新闻</li>
|
||
</ul>
|
||
<ul class="b">
|
||
<li class="show">推荐内容</li>
|
||
<li>游戏内容</li>
|
||
<li>新闻内容</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
// 1.先获取值
|
||
let x=document.querySelectorAll('.a li');
|
||
let y=document.querySelectorAll('.b li');
|
||
|
||
// 2.遍历x
|
||
x.forEach((item,index)=>{
|
||
//为x添加点击事件
|
||
item.onclick=()=>{
|
||
// 再次遍历一遍x，先把所有的classname给清掉
|
||
x.forEach((i,j)=>{
|
||
// 把x上面的classname清除掉
|
||
i.className='';
|
||
// 把y上面的默认样式给清除掉
|
||
y[j].className='';
|
||
});
|
||
// 当我们点击谁时，就把颜色给谁
|
||
item.className='color';
|
||
// 这一步是重点，x我们已经遍历一遍了，可以直接拿到索引值，xd索引值和y的索引值一样，
|
||
// 可以做相关联操作，和上面一样，也需要先清除classname的默认值，谁点给谁加classname
|
||
y[index].className='show';
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
</html> |