javascript實作網頁中的選項卡（兩種方法）
- 陈政宽～原創
- 2017-06-28 11:59:211669瀏覽
這篇文章主要介紹了用js語句實現網頁中的選項卡（兩種方法），非常不錯，具有參考借鑒價值,需要的朋友可以參考下
網頁中經常會用到選項卡這種東東，說白了就是點擊一個選項，下面會彈出這個選項裡的內容。
方法一：
方法一利用簡單的程式碼即可實現，以下是全部的程式碼；
#<!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 p{display: none;}
#content p.active{display: block;}
.show{background: red;}
</style>
</head>
<body>
<p id="box">
<ul id="ul1">
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>联系</li>
<li>我的</li>
</ul>
<p id="content">
<p class="active">
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</p>
<p>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</p>
<p>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</p>
<p>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</p>
<p>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</p>
</p>
</p>
<script type="text/javascript">
window.onload=function(){
var oli=document.getElementById("ul1").getElementsByTagName("li");
//alert(oli.length);
var op=document.getElementById("content").getElementsByTagName("p");
//alert(op.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='';
op[i].style.display='none';
}
this.className='show';
op[this._index].style.display='block';
}
}
}
</script>
</body>
</html>首先我們在HTML部分定義網頁選項卡中的內容。
<p id="box">
<ul id="ul1"><!--选项卡中的点击部分-->
<li>首页</li>
<li>产品</li>
<li>新闻</li>
<li>联系</li>
<li>我的</li>
</ul>
<p id="content">
<p class="active"><!--选项卡中要显示和被显示的部分-->
<ul>
<li>new1</li>
<li>new2</li>
<li>new3</li>
</ul>
</p>
<p>
<ul>
<li>new4</li>
<li>new5</li>
<li>new6</li>
</ul>
</p>
<p>
<ul>
<li>new7</li>
<li>new8</li>
<li>new9</li>
</ul>
</p>
<p>
<ul>
<li>new10</li>
<li>new11</li>
<li>new12</li>
</ul>
</p>
<p>
<ul>
<li>new13</li>
<li>new14</li>
<li>new15</li>
</ul>
</p>
</p>
</p>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 p{display: none;}
#content p.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 op=document.getElementById("content").getElementsByTagName("p");//提取HTML中的元素
//alert(op.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='';
op[i].style.display='none';
}
this.className='show';
op[this._index].style.display='block';
}
}
}
</script>JS語句中的第一個for迴圈是為了取得所有的選項卡中的點擊部分；因為I這個變數在下面的事件函數中無法存取到，所以每次點擊時，i變數會循環到oli.length值。因此將i的值交給一個我們自訂的元素屬性上來保存循環中i的值，供下面使用。即：oli[i]._index=i;
新增點擊函數後，第二個for循環是為了把所有的oli的className改為「空」和所有的op的style為display='none'；循環結束後，在為目前點擊的這個oli添加className和下面對應的op的style為display='block';
以下是運行的結果：
在編寫程式時一定要注意，選項卡中的點擊部分即：li的數量（JS裡oli.length）要和下面ID為content的p裡包含的p數量（JS裡op.length）相同，我在編寫程式時就因為oli.length與op.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 op = document.getElementById(id);
var oBtn = op.getElementsByTagName("li");
var oBox = op.getElementsByTagName("p");
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 p.active {
display: block;
padding: 10px;
line-height: 20px;
width: 278px;
border: solid 1px #eee;
}
</style>
</head>
<body>
<p id="tabMain" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain1" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain2" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
<p id="tabMain4" class="tabMenu">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p class="tabSide active">内容1</p>
<p class="tabSide">内容2</p>
<p class="tabSide">内容3</p>
</p>
</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 op = document.getElementById(id);
var oBtn = op.getElementsByTagName("li");
var oBox = op.getElementsByTagName("p");
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>透過新增事件和自運行函數完成多個選項卡。
以上是javascript實作網頁中的選項卡（兩種方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn