JS如何实现选项卡切换效果？

猿友 2021-03-17 17:36:55 浏览数 (3024)

这篇文章 W3Cschool 小编教你 JS 如何实现选项卡切换。

先来看下最终效果：

GIF 2021-3-17 16-38-40

相关代码：

<!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>

以上就是 JS 实现选项卡切换的全部内容。请同学们自行练习巩固。