網頁中經常會用到選項卡這種東東，說白了就是點擊一個選項，下面會彈出這個選項里的內容。
方法一：
方法一利用簡單的代碼即可實現，以下是全部的代碼；
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>選項卡</title> <style type="text/css"> *{margin: 0;padding: 0;} #box{width: 600px;background: #ccc;margin: 0 auto;} li{list-style: none;} #ul1{display: block; width: 100%;overflow: hidden;} #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;} #content{width: 100%;margin-top: 20px;} #content div{display: none;} #content div.active{display: block;} .show{background: red;} </style> </head> <body> <div id="box"> <ul id="ul1"> <li>首頁</li> <li>產品</li> <li>新聞</li> <li>聯系</li> <li>我的</li> </ul> <div id="content"> <div class="active"> <ul> <li>new1</li> <li>new2</li> <li>new3</li> </ul> </div> <div> <ul> <li>new4</li> <li>new5</li> <li>new6</li> </ul> </div> <div> <ul> <li>new7</li> <li>new8</li> <li>new9</li> </ul> </div> <div> <ul> <li>new10</li> <li>new11</li> <li>new12</li> </ul> </div> <div> <ul> <li>new13</li> <li>new14</li> <li>new15</li> </ul> </div> </div> </div> <script type="text/javascript"> window.onload=function(){ var oli=document.getElementById("ul1").getElementsByTagName("li"); //alert(oli.length); var odiv=document.getElementById("content").getElementsByTagName("div"); //alert(odiv.length) for(var i=0;i<oli.length;i++){ oli[i]._index=i; oli[i].onclick=function(){ //alert(i); for(i=0;i<oli.length;i++){ oli[i].className=''; odiv[i].style.display='none'; } this.className='show'; odiv[this._index].style.display='block'; } } } </script> </body></html>首先我們在HTML部分定義網頁選項卡中的內容。
<div id="box"> <ul id="ul1"><!--選項卡中的點擊部分--> <li>首頁</li> <li>產品</li> <li>新聞</li> <li>聯系</li> <li>我的</li> </ul> <div id="content"> <div class="active"><!--選項卡中要顯示和被顯示的部分--> <ul> <li>new1</li> <li>new2</li> <li>new3</li> </ul> </div> <div> <ul> <li>new4</li> <li>new5</li> <li>new6</li> </ul> </div> <div> <ul> <li>new7</li> <li>new8</li> <li>new9</li> </ul> </div> <div> <ul> <li>new10</li> <li>new11</li> <li>new12</li> </ul> </div> <div> <ul> <li>new13</li> <li>new14</li> <li>new15</li> </ul> </div> </div> </div>
CSS部分對HTML中的內容進行修飾：
<style type="text/css"> *{margin: 0;padding: 0;} #box{width: 600px;background: #ccc;margin: 0 auto;} li{list-style: none;} #ul1{display: block; width: 100%;overflow: hidden;} #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;} #content{width: 100%;margin-top: 20px;} #content div{display: none;} #content div.active{display: block;} .show{background: red;} </style>最后是最重要的js部分：
<script type="text/javascript"> window.onload=function(){ var oli=document.getElementById("ul1").getElementsByTagName("li"); //alert(oli.length); var odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素 //alert(odiv.length) for(var i=0;i<oli.length;i++){ oli[i]._index=i; oli[i].onclick=function(){ //alert(i); for(i=0;i<oli.length;i++){ oli[i].className=''; odiv[i].style.display='none'; } this.className='show'; odiv[this._index].style.display='block'; } } } </script>JS語句中的第一個for循環是為了取得所有的選項卡中的點擊部分；因為I這個變量在下面的事件函數中無法訪問到，所以每次點擊時，i變量循環到oli.length值。因此將i的值交給一個我們自定義的元素屬性上來保存循環中i的值，供下面使用。即：oli[i]._index=i;
添加點擊函數后，第二個for循環是為了把所有的oli的className改為“空”和所有的odiv的style為display='none'；循環結束后，在給當前點擊的這個oli添加className和下面相應的odiv的style為display='block';
以下是運行的結果：
在編寫程序時一定要注意，選項卡中的點擊部分即：li的數量（JS里oli.length）要和下面ID為content的div里包含的div數量（JS里odiv.length）相同，我在編寫程序時就因為oli.length與odiv.length不相等，導致程序報錯，但是好長時間都找不到錯誤；總而言之還是要多多細心。
方法二：
方法一適用于選項卡比較少的情況，但如果選項卡內容較多時我們要用到這種方法，第二種方法運用到了這周我們老師講的一個在JS種比較重要的知識點：自運行函數
(function a(){ //函數里的內容 })(參數);定義函數a();給整個函數帶上括號，后面的括號為輸入參數；
以下為方法二自運行函數的程序：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>多個tab選項卡</title> <script> window.onload = function() { tab("tabMain", "click"); tab("tabMain1", "click"); tab("tabMain2", "click"); tab("tabMain4", "click"); function tab(id, event) { var oDiv = document.getElementById(id); var oBtn = oDiv.getElementsByTagName("li"); var oBox = oDiv.getElementsByTagName("div"); for(var i = 0; i < oBtn.length; i++) { //console.log(i) (function(index) {//自執行函數 oBtn[index].addEventListener(event, function() { for(var i = 0; i < oBtn.length; i++) { oBtn[i].className = ''; oBox[i].className = 'tabSide'; } this.className = 'active'; oBox[index].className = 'active'; });//添加事件監聽 })(i) } } } </script> <style> * { padding: 0; margin: 0; list-style: none; } .tabMenu { width: 300px; margin: 50px auto 0 auto; } .tabMenu ul { display: block; overflow: hidden; width: 300px; height: 40px; background: #eee; } .tabMenu ul li { cursor: pointer; display: block; float: left; width: 100px; text-align: center; height: 40px; line-height: 40px; font-size: 16px; } .tabMenu ul li.active { background: #f00; color: #fff; } .tabMenu .tabSide { display: none; padding: 10px; line-height: 20px; width: 278px; border: solid 1px #eee; } .tabMenu div.active { display: block; padding: 10px; line-height: 20px; width: 278px; border: solid 1px #eee; } </style> </head> <body> <div id="tabMain" class="tabMenu"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabSide active">內容1</div> <div class="tabSide">內容2</div> <div class="tabSide">內容3</div> </div> <div id="tabMain1" class="tabMenu"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabSide active">內容1</div> <div class="tabSide">內容2</div> <div class="tabSide">內容3</div> </div> <div id="tabMain2" class="tabMenu"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabSide active">內容1</div> <div class="tabSide">內容2</div> <div class="tabSide">內容3</div> </div> <div id="tabMain4" class="tabMenu"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabSide active">內容1</div> <div class="tabSide">內容2</div> <div class="tabSide">內容3</div> </div> </body></html>和方法一相似先寫HTML里的內容，CSS部分對HTML進行修飾，我們直接來看JS部分；
<script> window.onload = function() { tab("tabMain", "click"); tab("tabMain1", "click"); tab("tabMain2", "click"); tab("tabMain4", "click"); function tab(id, event) { var oDiv = document.getElementById(id); var oBtn = oDiv.getElementsByTagName("li"); var oBox = oDiv.getElementsByTagName("div"); for(var i = 0; i < oBtn.length; i++) { //alert(i)； (function(index) {//自執行函數 oBtn[index].addEventListener(event, function() { for(var i = 0; i < oBtn.length; i++) { oBtn[i].className = ''; oBox[i].className = 'tabSide'; } this.className = 'active'; oBox[index].className = 'active'; });//添加事件監聽 })(i) } } } </script>通過添加事件和自運行函數完成多個選項卡。
新聞熱點
疑難解答
