How does JS achieve tab switching?
May 29, 2021 Article blog
This article W3Cschool small editor teaches you how JS implements tab switching.
Let's start with the final effect:
Related code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择项卡切换 - 编程狮(w3cschool.cn)</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
div.box {
width:50vw;/*vw和vh是可视化窗口的高度和宽度，50vw是可视化窗口宽度的50%*/
height:50vh;/*50vh是可视化窗口高度的50%*/
display:flex;/*使ul和div处于同一水平列*/
margin:20vh auto;
}
ul.mark {
width:10vw;
height:50vh;
list-style:none;/* 去掉li前面的黑点 */
text-align:center;
}
ul.mark>li {
border:1px solid black;
padding:1vh 0;
cursor:pointer;/* 改变光标 */
}
div.main {
width:40vw;
height:50vh;
}
.main1,.main2,.main3,.main4,.main5 {
width:100%;
height:100%;
display:none;
}
img {
width:100%;
height:100%;
}
li.checked {
background:#F5D2B4;
}
div.checked {
display:block;/*元素以块状方式显示*/
}
</style>
</head>
<body>
<div class="box">
<ul class="mark">
<li class="checked">会员好礼</li>
<li>vue.js课程</li>
<li>uni-app入门教程</li>
<li>uni-app跨平台开发</li>
<li>数据可视化</li>
</ul>
<div class="main">
<div class="main1 checked">
<img src="https://7n.w3cschool.cn/attachments/knowledge/202103/75950.png" alt="会员好礼">
</div>
<div class="main2">
<img src="https://7n.w3cschool.cn/attachments/knowledge/202012/96749.png" alt="vue.js课程">
</div>
<div class="main3">
<img src="https://7n.w3cschool.cn/attachments/knowledge/202012/29796.png" alt="uni-app入门教程">
</div>
<div class="main4">
<img src="https://7n.w3cschool.cn/attachments/knowledge/202012/71201.png" alt="uni-app跨平台开发">
</div>
<div class="main5">
<img src="https://7n.w3cschool.cn/attachments/knowledge/202012/66709.png" alt="数据可视化">
</div>
</div>
</div>
<script type="text/javascript" src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js" ></script>
<script>
$("ul.mark li").click(function() {
$("ul.mark li").removeClass("checked");//清除li样式
$(this).addClass("checked");
$(".main>div").css("display", "none");
var index = $("ul.mark li").index(this);//获取li的索引
$(".main>div").eq(index).css("display", "block");//通过索引确定相应的内容
});
</script>
</body>
</html>
That's all the JS implements for tab switching. Ask the students to practice consolidation on their own.