當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2024/3/13 javascript 37 豆豆

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

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

這里我取出我要對(duì)其操作的選項(xiàng)卡后，便是寫(xiě)JS部分了。選項(xiàng)卡在li中有三個(gè)選項(xiàng)，如何實(shí)現(xiàn)他們對(duì)應(yīng)的div的切換呢？首先將三個(gè)選項(xiàng)卡對(duì)應(yīng)的div全部隱藏，也就是說(shuō)，一開(kāi)始是沒(méi)有選項(xiàng)卡的顯示的，在進(jìn)入JS后首先打開(kāi)其中一個(gè)選項(xiàng)卡的div。再寫(xiě)一個(gè)for循環(huán)，用于切換選項(xiàng)卡選項(xiàng)，然后選項(xiàng)卡的切換是根據(jù)鼠標(biāo)點(diǎn)擊來(lái)進(jìn)行切換的，而點(diǎn)擊的時(shí)候出現(xiàn)的效果便是對(duì)應(yīng)該選項(xiàng)卡的div的顯現(xiàn)。所以對(duì)該選項(xiàng)卡li的onclic()進(jìn)行操作，這里再來(lái)一個(gè)for循環(huán)，用于將所有的選項(xiàng)卡對(duì)應(yīng)的div隱藏，再將點(diǎn)擊的該選項(xiàng)卡的div顯現(xiàn)出來(lái)，即aList[this.index].className = "on"(用于顯現(xiàn)將選項(xiàng)卡點(diǎn)擊是的效果)和?aDiv[this.index].className = "show"(用于顯現(xiàn)選項(xiàng)卡下的div)。如此兩個(gè)循環(huán)便可以實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換操作了。如下為實(shí)現(xiàn)代碼：

<!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>我的網(wǎng)頁(yè)</title><style type="text/css">*{padding: 0px;margin:0px;}body{margin:0;padding:0;}/*第一個(gè)div的設(shè)置*/ .box1{width:100%;height:300px;text-align:center;border-radius: 1px solid black;background-color: rgba(225,225,225,0.1)}/*第二個(gè)div的設(shè)置*/ /*#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;/*實(shí)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)至此時(shí)箭頭轉(zhuǎn)換成手指的操作*/width:100px;height:30px;line-height:30px;list-style:none;/*去點(diǎn)*/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實(shí)現(xiàn)選項(xiàng)卡切換window.onload =function()/*當(dāng)js放在head中時(shí)，需要使用window.onload ，其作用是讓整個(gè)html文本讀取完之后當(dāng)使用到j(luò)s部分時(shí)自動(dòng)調(diào)用，否則js部分變?cè)趆tml文本中不起作用*/{var aList = document.querySelectorAll('#direction ul li');//獲取選項(xiàng)頁(yè)部分的livar aDiv = document.querySelectorAll('#direction div')//獲取direction下的三個(gè)div，用于后面的對(duì)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中搜索，或輸入網(wǎng)址">&nbsp<button id="myBtn" style="width:60px;height: 32px">搜索</button><script>document.getElementById("myBtn").addEventListener("click", function(){alert("請(qǐng)連接互聯(lián)網(wǎng)！");});</script></div> <div id ="direction"><ul><li>我的關(guān)注</li><li>推薦</li><li>導(dǎo)航</li></ul><div class="hide"><h2>我的導(dǎo)航</h2><ul><li class="menu_li">百度糯米</li><li class="menu_li">京東商城</li><li class="menu_li">1號(hào)店</li><li class="menu_li">蘇寧易購(gòu)</li><li class="menu_li">唯品會(huì)</li><li class="menu_li">當(dāng)當(dāng)網(wǎng)</li><li class="menu_li">淘寶網(wǎng)</li><li class="menu_li">微信</li><li class="menu_li">斗魚(yú)</li><li class="menu_li">騰訊</li><li class="menu_li">愛(ài)奇藝</li><li class="menu_li">優(yōu)酷網(wǎng)</li></ul></div><div class="show"><h2>請(qǐng)連接互聯(lián)網(wǎng)!</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號(hào)店</li><li class="menu_li">蘇寧易購(gòu)</li><li class="menu_li">唯品會(huì)</li><li class="menu_li">當(dāng)當(dāng)網(wǎng)</li><li class="menu_li">淘寶網(wǎng)</li><li class="menu_li">微信</li><li class="menu_li">斗魚(yú)</li><li class="menu_li">騰訊</li><li class="menu_li">愛(ài)奇藝</li><li class="menu_li">優(yōu)酷網(wǎng)</li></ul><h2>資訊信息</h2><ul><li class="menu_li">騰訊網(wǎng)</li><li class="menu_li">央視網(wǎng)</li><li class="menu_li">人民網(wǎng)</li><li class="menu_li">中國(guó)網(wǎng)</li><li class="menu_li">鳳凰網(wǎng)</li><li class="menu_li">新華網(wǎng)</li><li class="menu_li">中關(guān)村在線</li><li class="menu_li">虎撲體育</li><li class="menu_li">汽車(chē)之家</li><li class="menu_li">CHINADAILY</li></ul><h2>娛樂(lè)休閑</h2><ul><li class="menu_li">愛(ài)奇藝</li><li class="menu_li">優(yōu)酷</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">起點(diǎn)中文網(wǎng)</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>購(gòu)物海淘</h2><ul><li class="menu_li">百度糯米</li><li class="menu_li">京東</li><li class="menu_li">淘寶網(wǎng)</li><li class="menu_li">愛(ài)淘寶</li><li class="menu_li">天貓超市</li><li class="menu_li">唯品會(huì)</li><li class="menu_li">當(dāng)當(dāng)網(wǎng)</li><li class="menu_li">1號(hào)店</li><li class="menu_li">蘇寧易購(gòu)</li><li class="menu_li">蘑菇街</li><li class="menu_li">國(guó)美在線</li></ul><h2>生活周邊</h2><ul><li class="menu_li">大眾點(diǎn)評(píng)</li><li class="menu_li">12306</li><li class="menu_li">智聯(lián)招聘</li><li class="menu_li">天涯社區(qū)</li><li class="menu_li">gan趕集</li><li class="menu_li">快遞100</li><li class="menu_li">去哪兒網(wǎng)</li></ul></div> </div> </body> </html>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

选项卡
js

上一篇： baidu卫兵新版力推三级加快器电脑一
下一篇： JavaScript头像上传器的实现