js和jquery实现tab状态栏的切换

今天做一个简单的小案例，用js和jquery分别去实现点击tab栏，实现切换的目的，效果如下图：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>状态栏切换</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.main {

width: 720px;

display: block;

margin: 50px auto;

}

.table-title {

width: 100%;

height: 100%;

border: 1px solid black;

}

.table-title ul {

list-style: none;

display: flex;

}

.table-title li {

width: 25%;

height: 100%;

background-color: gainsboro;

text-align: center;

border-right: 1px solid black;

cursor: pointer;

}

.table-title li:last-child {

border-right: none;

}

.table-title li label {

text-align: center;

cursor: pointer;

}

.tab-box .tab-show {

display: none;

border: 1px solid black;

border-top: none;

text-align: center;

}

.tab-box .tab-show:first-Child {

display: block;

}

.change {

opacity: 0.7;

}

</style>

<script src="js/jquery-3.5.1.js"></script>

<script>

window.onload = function() {

var allLi = document.getElementsByTagName("li");

var boxs = document.getElementsByClassName("tab-box")[0].children;

for (var i = 0; i < allLi.length; i++) {

allLi[i].index = i;

allLi[i].onclick = function() {

var index = this.index;

boxs[index].style.display="block";

allLi[index].style.opacity=0.7;

for (var j = 0; j < allLi.length; j++) {

if(j != index){

boxs[j].style.display="none";

allLi[j].style.opacity=1;

}

}

}

}

}

$().ready(function() {

$(".table-title li").click(function() {

var _index = $(this).index();

$(".tab-box>div").eq(_index).show().siblings().hide();

$(this).addClass("change").siblings().removeClass("change");

});

});

</script>

</head>

<body>

<div class="main">

<div class="table-title">

<ul>

<li><label>手机数码</label></li>

<li><label>电脑办公</label></li>

<li><label>生活用品</label></li>

<li><label>居家必备</label></li>

</ul>

</div>

<div class="tab-box" style="width: 100%;height: calc(100%-40px);">

<div class="tab-show">

手机数码

</div>

<div class="tab-show">

电脑办公

</div>

<div class="tab-show">

生活用品

</div>

<div class="tab-show">

居家必备

</div>

</div>

</div>

</body>

</html>