基于JS實現(xiàn)網(wǎng)頁中的選項卡（兩種方法）
更新時間：2017年06月16日 08:39:26 作者：domunweb
這篇文章主要介紹了用js語句實現(xiàn)網(wǎng)頁中的選項卡（兩種方法），非常不錯，具有參考借鑒價值,需要的朋友可以參考下
網(wǎng)頁中經(jīng)常會用到選項卡這種東東，說白了就是點擊一個選項，下面會彈出這個選項里的內(nèi)容。
方法一：
方法一利用簡單的代碼即可實現(xiàn)，以下是全部的代碼；
<!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>產(chǎn)品</li>
<li>新聞</li>
<li>聯(lián)系</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部分定義網(wǎng)頁選項卡中的內(nèi)容。
<div id="box">
<ul id="ul1"><!--選項卡中的點擊部分-->
<li>首頁</li>
<li>產(chǎn)品</li>
<li>新聞</li>
<li>聯(lián)系</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中的內(nèi)容進行修飾：
<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循環(huán)是為了取得所有的選項卡中的點擊部分；因為I這個變量在下面的事件函數(shù)中無法訪問到，所以每次點擊時，i變量循環(huán)到oli.length值。因此將i的值交給一個我們自定義的元素屬性上來保存循環(huán)中i的值，供下面使用。即：oli[i]._index=i;
添加點擊函數(shù)后，第二個for循環(huán)是為了把所有的oli的className改為“空”和所有的odiv的style為display='none'；循環(huán)結(jié)束后，在給當(dāng)前點擊的這個oli添加className和下面相應(yīng)的odiv的style為display='block';
以下是運行的結(jié)果：
在編寫程序時一定要注意，選項卡中的點擊部分即：li的數(shù)量（JS里oli.length）要和下面ID為content的div里包含的div數(shù)量（JS里odiv.length）相同，我在編寫程序時就因為oli.length與odiv.length不相等，導(dǎo)致程序報錯，但是好長時間都找不到錯誤；總而言之還是要多多細心。
方法二：
方法一適用于選項卡比較少的情況，但如果選項卡內(nèi)容較多時我們要用到這種方法，第二種方法運用到了這周我們老師講的一個在JS種比較重要的知識點：自運行函數(shù)
(function a(){
//函數(shù)里的內(nèi)容
})(參數(shù));
定義函數(shù)a();給整個函數(shù)帶上括號，后面的括號為輸入?yún)?shù)；
以下為方法二自運行函數(shù)的程序：
<!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) {//自執(zhí)行函數(shù)
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';
});//添加事件監(jiān)聽
})(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">內(nèi)容1</div>
<div class="tabSide">內(nèi)容2</div>
<div class="tabSide">內(nèi)容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">內(nèi)容1</div>
<div class="tabSide">內(nèi)容2</div>
<div class="tabSide">內(nèi)容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">內(nèi)容1</div>
<div class="tabSide">內(nèi)容2</div>
<div class="tabSide">內(nèi)容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">內(nèi)容1</div>
<div class="tabSide">內(nèi)容2</div>
<div class="tabSide">內(nèi)容3</div>
</div>
</body>
</html>
和方法一相似先寫HTML里的內(nèi)容，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) {//自執(zhí)行函數(shù)
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';
});//添加事件監(jiān)聽
})(i)
}
}
}
</script>
通過添加事件和自運行函數(shù)完成多個選項卡。
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript運動框架的第一部分，解決速度正負取整問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
layui使用及簡單的三級聯(lián)動實現(xiàn)教程
這篇文章主要給大家介紹了關(guān)于layui使用及簡單的三級聯(lián)動的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單掃雷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
本文通過實例給大家分享了原生JS進行前后端同構(gòu)的相關(guān)知識點以及相關(guān)代碼，有需要的朋友參考學(xué)習(xí)下。2018-04-04
BootStrap glyphicons 字體圖標(biāo)實現(xiàn)方法
字體圖標(biāo)是在 Web 項目中使用的圖標(biāo)字體。接下來通過本文給大家介紹BootStrap glyphicons 字體圖標(biāo)實現(xiàn)方法，需要的朋友參考下2016-05-05
Bootstrap基本組件學(xué)習(xí)筆記之進度條(15)
這篇文章主要為大家詳細介紹了Bootstrap基本組件學(xué)習(xí)筆記之進度條,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JS實現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法(兼容IE和Firefox)
這篇文章主要介紹了JS實現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法,可實現(xiàn)文本與圖片的插入功能,并兼容IE和Firefox瀏覽器,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了微信小程序模板template簡單用法,結(jié)合實例形式分析了微信小程序模板template的功能、簡單使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-12-12
JS+CSS實現(xiàn)類似QQ好友及黑名單效果的樹型菜單
這篇文章主要介紹了JS+CSS實現(xiàn)類似QQ好友及黑名單效果的樹型菜單,涉及JavaScript結(jié)合鼠標(biāo)事件針對頁面元素CSS樣式的動態(tài)操作技巧,非常簡單實用,需要的朋友可以參考下2015-09-09
當(dāng)我們發(fā)送郵件時，可以自定義郵件發(fā)送的時間，那么使用代碼是如何實現(xiàn)的呢？下面通過本篇文章給大家介紹使用純javascript實現(xiàn)自動發(fā)送郵件，感興趣的朋友可以參考下2015-10-10