溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS怎么實(shí)現(xiàn)選項(xiàng)卡切換效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS怎么實(shí)現(xiàn)選項(xiàng)卡切換效果”這篇文章吧。
相關(guān)代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>選擇項(xiàng)卡切換 - 億速云(yisu.com)</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.yisu.com/attachments/knowledge/202103/75950.png" alt="會員好禮"> </div> <div class="main2"> <img src="https://7n.yisu.com/attachments/knowledge/202012/96749.png" alt="vue.js課程"> </div> <div class="main3"> <img src="https://7n.yisu.com/attachments/knowledge/202012/29796.png" alt="uni-app入門教程"> </div> <div class="main4"> <img src="https://7n.yisu.com/attachments/knowledge/202012/71201.png" alt="uni-app跨平臺開發(fā)"> </div> <div class="main5"> <img src="https://7n.yisu.com/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)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼