代码效果
(具体效果可根据自己的需求进行增加)
代码
(1)CSS
/* CSS文件 */
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
min-width: 1000px;
height: 100%;
}
.tab-nav,.tab-nav ul{
width: 100%;
height: 40px;
font-size: 0;
box-shadow:3px 3px 3px grey;
}
.tab-nav li{
display: inline-block;
width: 25%;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 12px;
}
.tab-content {
padding: 20px;
width: 100%;
min-width: 1000px;
height: 800px;
}
.tab-content .inform {
display: none;
}
.active {
background-color:rgb(144, 231, 144) !important;
color: white;
}
(2)HTML+JS
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tab">
<!-- 导航栏 -->
<div class="tab-nav">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<!-- tab切换区 -->
<div class="tab-content">
<div class="inform" style="display: block;">111</div>
<div class="inform">222</div>
<div class="inform">333</div>
<div class="inform">444</div>
</div>
</div>
<script>
(function () {
let tabList = document.getElementsByTagName('li');
let contentList = document.getElementsByClassName('inform');
for (let i = 0; i < tabList.length; i++) {
tabList[i].addEventListener('click', function () {
// 设置索引值
tabList[i].index = i;
for (let j = 0; j < tabList.length; j++) {
// 将所有的导航栏的选项卡的类名进行清空
tabList[j].className = ''
}
// 对当前点击的选项卡设置类名active
this.className = 'active';
for (let k = 0; k < contentList.length; k++) {
// 将所有的板块display属性都先设置为'none'
contentList[k].style.display = 'none'
}
// 为对应的板块设置block,进行展示
contentList[this.index].style.display = 'block';
})
}
}())
</script>
</body>
</html>