js，jq選項卡實現方式
阿新 • • 發佈：2019-01-28
js選項卡的實現方法：
先寫好一個html css的頁面樣式
html css部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選項卡</title> </head> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; } .box { width: 50%; margin: 0 auto; } .nav { width: 100%; } .nav li { width: 25%; float: left; text-align: center; border: 1px solid #000; box-sizing: border-box; border-right: none; line-height: 2; cursor: pointer; } .nav li:last-child { border-right: 1px solid #000; } .nav li.checked { border-bottom: 1px solid #ddd; background: #ddd; } .subnav { border: 1px solid #000; border-top: none; background: #ddd; } .subnav li { width: 100%; text-align: center; height: 100px; line-height: 100px; display: none; } .subnav li:first-child { display: block; } .clearfix:after { content: " "; display: block; clear: both; } </style> <body> <div class="box"> <ul class="nav clearfix"> <li class="checked">選項一</li> <li>選項二</li> <li>選項三</li> <li>選項四</li> </ul> <ul class="subnav"> <li>我是選項一</li> <li>我是選項二</li> <li>我是選項三</li> <li>我是選項四</li> </ul> </div> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </html>
下面用js和jq分別寫出來
//js的方法 window.onload=function(){ //找物件的方法很多 我這裡用的是比較原始的 可以根據個人愛好自行選擇 var navUl=document.getElementsByClassName("nav")[0];//這是單獨找一個 所以需要加上下標下同 var subnavUl=document.getElementsByClassName("subnav")[0]; var navLi=navUl.getElementsByTagName("li"); //這裡要找到navUl裡面所有的li 所以不加下標 下同 var subnavLi=subnavUl.getElementsByTagName("li"); for(var i=0;i<navLi.length;i++){//迴圈navUl裡面的li navLi[i].index=i;//navLi[i].index是指navUl裡面的li的下標（index）;為該li新增一個index屬性，並將index的值設定為i navLi[i].onclick=function(){//點選事件 點選navUl裡面的li for(var j=0;j<navLi.length;j++){//迴圈去掉navUl裡面的li的所有樣式，把點選所對應subnav裡面的li顯示出來 navLi[j].removeAttribute("class");//清除navUl裡面的所有li樣式 subnavLi[j].style.display="none";//隱藏subnavLi裡面li } this.setAttribute("class","checked");//給所navUl裡面點選的li樣式 subnavLi[this.index].style.display="block"//讓subnavLi裡面所對應的li顯示 } } //jq的方法 jq包 上面已經引入好了 當然也可以自行引入 //因為jq的選擇器很好 很強大 所以非常簡單 $(function(){ $(".nav li").click(function(){//直接點選事件 $(this).addClass("checked").siblings().removeClass("checked");//給當前點選的li一個樣式 移除當前li的所有同胞元元素的樣式 $(".subnav li").eq($(this).index()).show().siblings().hide();//讓subnav裡面當前點選元素下標所對應的li顯示 隱藏subnav裡面當前點選元素下標以外的li }) })
當然寫選項卡的方法有很多 我只寫了兩個最簡單的 最常用的