溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS怎么實現選項卡切換效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JS怎么實現選項卡切換效果”這篇文章吧。
相關代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>選擇項卡切換 - 億速云(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前面的黑點 */ 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.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跨平臺開發"> </div> <div class="main5"> <img src="https://7n.yisu.com/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怎么實現選項卡切換效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
