原生js实现复杂Tab栏切换（非常经典）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style-type: none;
}
.wrap {
position: relative;
width: 700px;
height: 400px;
border: 1px solid #000;
margin: 0 auto;
}
.left_btn {
float: left;
width: 200px;
height: 700px;
}
.left_btn ul li {
box-sizing: border-box;
height: 100px;
border: 2px solid pink;
text-align: center;
line-height: 100px;
font-size: 30px;
background-color: red;
cursor: pointer;
}
.right_content {
display: none;
position: absolute;
top: 0;
right: 0;
float: left;
width: 500px;
height: 400px;
background-color: rgb(7, 142, 196);
}
.content_ {
position: relative;
height: 350px;
background-color: pink;
}
.top_content {
display: none;
position: absolute;
top: 0;
right: 0;
width: 500px;
height: 350px;
background-color: rgb(100, 7, 221);
text-align: center;
line-height: 350px;
font-size: 50px;
}
.bt_btn {
height: 50px;
background-color: rgb(192, 189, 22);
}
.bt_btn ul {
display: flex;
}
.bt_btn ul li {
flex: 1;
text-align: center;
line-height: 50px;
border: 1px solid #000;
cursor: pointer;
}
li.active {
background-color: #fff;
color: #000;
}
p.active {
display: block;
}
li.current {
background-color: yellow!important;
color: #fff;
}
</style>
<body>
<div class="wrap">
<!-- 左侧按钮 -->
<div class="left_btn">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
<!-- 右侧整体区域 -->
<div class="right_content " style="display: block;">
<!-- 上面内容区域 -->
<div class="content_">
<p class="top_content active">a1</p>
<p class="top_content">a2</p>
<p class="top_content">a3</p>
<p class="top_content">a4</p>
</div>
<!-- 小按钮区域 -->
<div class="bt_btn">
<ul>
<li>a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
</ul>
</div>
</div>
<div class="right_content">
<!-- 上面内容区域 -->
<div class="content_">
<p class="top_content active">b1</p>
<p class="top_content">b2</p>
<p class="top_content">b3</p>
<p class="top_content">b4</p>
</div>
<!-- 小按钮区域 -->
<div class="bt_btn">
<ul>
<li>b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
</div>
</div>
<div class="right_content">
<!-- 上面内容区域 -->
<div class="content_">
<p class="top_content active">c1</p>
<p class="top_content">c2</p>
<p class="top_content">c3</p>
<p class="top_content">c4</p>
</div>
<!-- 小按钮区域 -->
<div class="bt_btn">
<ul>
<li>c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
</ul>
</div>
</div>
<div class="right_content">
<!-- 上面内容区域 -->
<div class="content_">
<p class="top_content active">d1</p>
<p class="top_content">d2</p>
<p class="top_content">d3</p>
<p class="top_content">d4</p>
</div>
<!-- 小按钮区域 -->
<div class="bt_btn">
<ul>
<li>d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
</ul>
</div>
</div>
</div>
<script>
var right_content = document.getElementsByClassName('right_content');
for (var i = 0; i < right_content.length; i++) {
tab(right_content[i]);
}
function tab(ele) {
// 所有的p
var right_content = document.getElementsByClassName('right_content');
// console.log(right_content[0]);
var ps = ele.getElementsByClassName('top_content');
// console.log(ps);
// 下方小按钮
var bt_btns = ele.getElementsByTagName('li');
for (var i = 0; i < bt_btns.length; i++) {
// 添加索引
bt_btns[i].index = i;
bt_btns[i].onmouseenter = function() {
// console.log(this.index);
// 清空所有按钮样式 和隐藏所有p内容
for (var j = 0; j < bt_btns.length; j++) {
bt_btns[j].className = '';
ps[j].style.display = 'none';
}
this.className = 'active';
ps[this.index].style.display = 'block';
}
}
}
// 获取左边4个按钮
// 获取 左侧ul
var left_ul = document.getElementsByClassName('left_btn')[0];
// 左侧4个按钮
var left_lis = left_ul.getElementsByTagName('li');
// 4个主体内容
var right_content = document.getElementsByClassName('right_content');
// 右侧小按钮
// var bt_btn = document.getElementsByClassName('bt_btn');
// var bt_btn_lis = bt_btn[0].getElementsByTagName('li');
// console.log(bt_btn_lis);
// console.log(bt_btn);
// 左侧所有li按钮
var btn_left = left_ul.getElementsByTagName('li');
for (var i = 0; i < btn_left.length; i++) {
btn_left[i].index = i;
btn_left[i].onmouseenter = function() {
for (var i = 0; i < btn_left.length; i++) {
right_content[i].style.display = 'none';
left_lis[i].className = '';
}
// console.log(this.index);
right_content[this.index].style.display = 'block';
left_lis[this.index].className = 'current';
}
}
// var btns_left =
</script>
</body>
</html>