這篇文章 W3Cschool 小編教你 JS 如何實(shí)現(xiàn)選項(xiàng)卡切換。
先來看下最終效果：
相關(guān)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇項(xiàng)卡切換 - 編程獅(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前面的黑點(diǎn) */
text-align:center;
}
ul.mark>li {
border:1px solid black;
padding:1vh 0;
cursor:pointer;/* 改變光標(biāo) */
}
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>數(shù)據(jù)可視化</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="數(shù)據(jù)可視化">
</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");//通過索引確定相應(yīng)的內(nèi)容
});
</script>
</body>
</html>
以上就是 JS 實(shí)現(xiàn)選項(xiàng)卡切換的全部內(nèi)容。請同學(xué)們自行練習(xí)鞏固。
