<!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>
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 0 auto;
}
ul {
list-style: none;
width: 600px;
height: 80px;
line-height: 80px;
background: #ccc;
border: 1px solid #eee;
font-size: 24px;
color: #000;
margin-bottom: 50px;
}
li {
float: left;
padding: 0px 20px;
box-sizing: border-box;
}
li.active {
border-top: 1px solid orange;
background: #fff;
}
.content div {
height: 400px;
display: none;
}
.content div:first-child {
background: red;
}
.content div:nth-child(2) {
background: greenyellow;
}
.content div:nth-child(3) {
background: #000;
}
.content div:last-child {
background: blue;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>单击游戏</li>
<li>手游资讯</li>
<li>休闲游戏</li>
<li>游戏壁纸</li>
</ul>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<script>
// 获取元素节点
let lis = document.querySelectorAll("ul li");
let divs = document.querySelectorAll(".content div");
divs[0].style.display = "block";
lis.forEach(function (li, index) {
//1 为每一个li添加鼠标移入效果
li.addEventListener("mouseover", function () {
/* 排他思想:
1-1 先将所有li的激活样式active 清除
2-1 先将所有显示内容的区域清除
*/
lis.forEach(function (li, index) {
li.className = "";
divs[index].style.display = "none";
})
// 1-2 添加active的激活样式
this.className = "active";
// 2-2 将需要显示的内容区域显示
divs[index].style.display = "block";
})
})
</script>
</body>
</html>
二级选项卡
该代码示例展示了如何使用HTML和CSS创建一个带有四个选项的导航列表,每个选项对应不同颜色背景的内容区域。通过JavaScript实现鼠标悬停在列表项上时,高亮选中项并显示相应内容区域的效果,应用了排他思想进行内容切换。
摘要由CSDN通过智能技术生成