免費AI編程助手
這篇文章 W3Cschool 小編教你 JS 如何實現選項卡切換。
先來看下最終效果：
相關代碼：
<!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跨平臺開發(fā)</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跨平臺開發(fā)">
</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 實現選項卡切換的全部內容。請同學們自行練習鞏固。
