您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關JS如何實現簡單tab選項卡切換,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
本人在上一篇文章也寫了用JS來實現tab選項卡切換效果,但是上次的那個代碼比較復雜,這次是簡化版的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab效果</title> <style type="text/css"> ul{ list-style: none; } *{ margin: 0; padding: 0; } #tab{ border: 1px solid #ccc; margin: 20px auto; width: 403px; border-top: none; } .list ul{ overflow: hidden; } .list li{ float: left; } .list li{ padding-left: 28px; padding-right: 28px; padding-top: 6px; padding-bottom: 6px; border: 1px solid #ccc; background: -moz-linear-gradient(top, #FEFEFE, #EDEDED); background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); border-right: none; cursor: pointer; } #listCon{ height: 100px; } #listCon div{ padding:10px; position:absolute; opacity:0; filter:alpha(opacity=0); } .list li:first-child{ border-left: none; } .list li:hover{ background: #fff; border-bottom: none; } .list li.cur{ background: #fff; border-bottom: none; } #listCon div.cur{ opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <div id="tab"> <div class="list"> <ul> <li class="cur">許嵩</li> <li>周杰倫</li> <li>林俊杰</li> <li>陳奕迅</li> </ul> </div> <div id="listCon"> <div class="cur">斷橋殘雪、千百度、幻聽、想象之中</div> <div>紅塵客棧、牛仔很忙、給我一首歌的時間、聽媽媽的話</div> <div>被風吹過的夏天、江南、一千年以后</div> <div>十年、K歌之王、浮夸</div> </div> </div> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("tab"); var lis = oDiv.getElementsByTagName("li"); var oDivCon = document.getElementById("listCon"); var lisDiv = oDivCon.getElementsByTagName("div"); for(var i=0;i<lis.length;i++){ lis[i].index = i; lis[i].onmouseover = function(){ show(this.index); } } function show(a){ for(var j=0;j<lis.length;j++){ lis[j].className = ""; lisDiv[j].className = ""; } lis[a].className = "cur"; lisDiv[a].className = "cur"; } } </script> </body> </html>
關于“JS如何實現簡單tab選項卡切換”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。