當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

关于选项卡的切换——JS实现

發布時間：2024/3/13 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了关于选项卡的切换——JS实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

對于選項卡的切換有很多種方法，這里介紹的是一種易于理解和簡單的方法。JS實現對div的操作，首先就得將div給取出來，然后對該div進行操作。如果要操作的div或者其它屬性有多個可以采用document.querySelectorAll()取用，注意，這里的document.querySelectorAll()取出來的是數組，而如果只需要對摸一個div取操作，則用document.querySelector()即可。document.querySelectorAll()括號里面填入的是，如果div設置的是id，便填入設置的id，這里我的選項卡的設置是?#direction ul li，所以這里括號里填入的就是 '#direction ul li'。

這里我取出我要對其操作的選項卡后，便是寫JS部分了。選項卡在li中有三個選項，如何實現他們對應的div的切換呢？首先將三個選項卡對應的div全部隱藏，也就是說，一開始是沒有選項卡的顯示的，在進入JS后首先打開其中一個選項卡的div。再寫一個for循環，用于切換選項卡選項，然后選項卡的切換是根據鼠標點擊來進行切換的，而點擊的時候出現的效果便是對應該選項卡的div的顯現。所以對該選項卡li的onclic()進行操作，這里再來一個for循環，用于將所有的選項卡對應的div隱藏，再將點擊的該選項卡的div顯現出來，即aList[this.index].className = "on"(用于顯現將選項卡點擊是的效果)和?aDiv[this.index].className = "show"(用于顯現選項卡下的div)。如此兩個循環便可以實現簡單的選項卡切換操作了。如下為實現代碼：

<!DOCTYPE html> <!DOCTYPE html> <html style="background-color: rgba(225,225,225,0.2);width: 100%;height: 100%; background: url(http://3.bp.blogspot.com/-7GKG80AcwdI/TvBCefflgoI/AAAAAAAAbkw/SQ_ySS_d8gc/s1600/kobe_Bryant_0001.jpg) no-repeat fixed center center;background-size:100% 100%;"> <head><title>我的網頁</title><style type="text/css">*{padding: 0px;margin:0px;}body{margin:0;padding:0;}/*第一個div的設置*/ .box1{width:100%;height:300px;text-align:center;border-radius: 1px solid black;background-color: rgba(225,225,225,0.1)}/*第二個div的設置*/ /*#box2{width:100%;height:600px;background:white;text-align:center;border-radius: 1px solid black;}*/#direction{margin-left: 225px;width:896px;height:30px;padding:0px; border:1px solid black;text-align:center;background-color: rgba(225,225,225,0.2)} #direction ul{margin-top:0px;float:left;padding:0px;display:;background: #f1f1f1;background-color: rgba(225,225,225,0.2)} #direction ul li{cursor: pointer;/*實現當鼠標移動至此時箭頭轉換成手指的操作*/width:100px;height:30px;line-height:30px;list-style:none;/*去點*/float:left;color:black;text-align:center;font-style:none;font-family:"粗體";background: white;background-color: rgba(225,225,225,0.2)} #direction ul li.on{background-color: #707070;color: white;font-family: "粗體";background-color: rgba(225,225,225,0.2) }#direction ul li.off{background-color: white;background-color: rgba(225,225,225,0.2) }#direction ul li.on:hover{font-family: "粗體";background-color: #555;background-color: rgba(225,225,225,0.3) }#direction ul li:hover{background-color: #555;color: white;font-family: "粗體";background-color: rgba(225,225,225,0.3) }#direction div{margin-left:0px;margin-top: 30px;width: 895px;height: 568px;border:1px solid black;text-align: center;background-color: rgba(225,225,225,0.2) } h2{padding: 10px;margin-left: 0;font-size: 15px;font-family: "粗體";background-color: rgba(225,225,225,0.2) } .hide{display: none; }.menu_li{margin:0px;border:1px solid black;background: #707070;padding: 1px;color: white; } </style> <script type="text/javascript">// JS實現選項卡切換window.onload =function()/*當js放在head中時，需要使用window.onload ，其作用是讓整個html文本讀取完之后當使用到js部分時自動調用，否則js部分變在html文本中不起作用*/{var aList = document.querySelectorAll('#direction ul li');//獲取選項頁部分的livar aDiv = document.querySelectorAll('#direction div')//獲取direction下的三個div，用于后面的對div的操作aList[1].className = "on";for(var i = 0; i<3;i++){aList[i].index = i;aList[i].onclick = function(){for (var j = 0;j<3;j++){aList[j].className = "off";aDiv[j].className = "hide";}aList[this.index].className = "on";aDiv[this.index].className = "show";}} } </script> </head> <body>  <div class ="box1"><img src="googlelogo.png" style="width:400px;height:100px;margin-top: 90px;"><br><input type ="text" style="width:400px;height: 30px;margin-top: 50px;margin-left: 0;" placeholder="在Google中搜索，或輸入網址">&nbsp<button id="myBtn" style="width:60px;height: 32px">搜索</button><script>document.getElementById("myBtn").addEventListener("click", function(){alert("請連接互聯網！");});</script></div> <div id ="direction"><ul><li>我的關注</li><li>推薦</li><li>導航</li></ul><div class="hide"><h2>我的導航</h2><ul><li class="menu_li">百度糯米</li><li class="menu_li">京東商城</li><li class="menu_li">1號店</li><li class="menu_li">蘇寧易購</li><li class="menu_li">唯品會</li><li class="menu_li">當當網</li><li class="menu_li">淘寶網</li><li class="menu_li">微信</li><li class="menu_li">斗魚</li><li class="menu_li">騰訊</li><li class="menu_li">愛奇藝</li><li class="menu_li">優酷網</li></ul></div><div class="show"><h2>請連接互聯網!</h2><img src="nowifi.png" style="width: 895px;height: 500px;margin-top:0;background-color: rgba(225,225,225,0.1)"></div><div class = "hide"><h2>猜你喜歡</h2><ul><li class="menu_li">百度糯米</li><li class="menu_li">京東商城</li><li class="menu_li">1號店</li><li class="menu_li">蘇寧易購</li><li class="menu_li">唯品會</li><li class="menu_li">當當網</li><li class="menu_li">淘寶網</li><li class="menu_li">微信</li><li class="menu_li">斗魚</li><li class="menu_li">騰訊</li><li class="menu_li">愛奇藝</li><li class="menu_li">優酷網</li></ul><h2>資訊信息</h2><ul><li class="menu_li">騰訊網</li><li class="menu_li">央視網</li><li class="menu_li">人民網</li><li class="menu_li">中國網</li><li class="menu_li">鳳凰網</li><li class="menu_li">新華網</li><li class="menu_li">中關村在線</li><li class="menu_li">虎撲體育</li><li class="menu_li">汽車之家</li><li class="menu_li">CHINADAILY</li></ul><h2>娛樂休閑</h2><ul><li class="menu_li">愛奇藝</li><li class="menu_li">優酷</li><li class="menu_li">土豆</li><li class="menu_li">4399</li><li class="menu_li">LETV</li><li class="menu_li">嗶哩嗶哩</li><li class="menu_li">起點中文網</li><li class="menu_li">音悅Tai</li><li class="menu_li">3DMGAME</li><li class="menu_li">多玩游戲</li><li class="menu_li">4399</li></ul><h2>購物海淘</h2><ul><li class="menu_li">百度糯米</li><li class="menu_li">京東</li><li class="menu_li">淘寶網</li><li class="menu_li">愛淘寶</li><li class="menu_li">天貓超市</li><li class="menu_li">唯品會</li><li class="menu_li">當當網</li><li class="menu_li">1號店</li><li class="menu_li">蘇寧易購</li><li class="menu_li">蘑菇街</li><li class="menu_li">國美在線</li></ul><h2>生活周邊</h2><ul><li class="menu_li">大眾點評</li><li class="menu_li">12306</li><li class="menu_li">智聯招聘</li><li class="menu_li">天涯社區</li><li class="menu_li">gan趕集</li><li class="menu_li">快遞100</li><li class="menu_li">去哪兒網</li></ul></div> </div> </body> </html>

總結

以上是生活随笔為你收集整理的关于选项卡的切换——JS实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

选项卡
js

上一篇： baidu卫兵新版力推三级加快器电脑一
下一篇： gradle idea java ssm