java网页选项_基于JS实现网页中的选项卡（两种方法）_javascr

网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。

方法一：

方法一利用简单的代码即可实现，以下是全部的代码；

选项卡

*{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;}

• 首页
• 产品
• 新闻
• 联系
• 我的

• new1
• new2
• new3

• new4
• new5
• new6

• new7
• new8
• new9

• new10
• new11
• new12

• new13
• new14
• new15

window.οnlοad=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[i]._index=i;

oli[i].οnclick=function(){

//alert(i);

for(i=0;i

oli[i].className='';

odiv[i].style.display='none';

}

this.className='show';

odiv[this._index].style.display='block';

}

}

}

首先我们在HTML部分定义网页选项卡中的内容。

• 首页
• 产品
• 新闻
• 联系
• 我的

• new1
• new2
• new3

• new4
• new5
• new6

• new7
• new8
• new9

• new10
• new11
• new12

• new13
• new14
• new15

CSS部分对HTML中的内容进行修饰：

*{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;}

最后是最重要的js部分：

window.οnlοad=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[i]._index=i;

oli[i].οnclick=function(){

//alert(i);

for(i=0;i

oli[i].className='';

odiv[i].style.display='none';

}

this.className='show';

odiv[this._index].style.display='block';

}

}

}

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();给整个函数带上括号，后面的括号为输入参数；

以下为方法二自运行函数的程序：

多个tab选项卡

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)

}

}

}

* {

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;

}

• tab1
• tab2
• tab3

内容1

内容2

内容3

• tab1
• tab2
• tab3

内容1

内容2

内容3

• tab1
• tab2
• tab3

内容1

内容2

内容3

• tab1
• tab2
• tab3

内容1

内容2

内容3

和方法一相似先写HTML里的内容，CSS部分对HTML进行修饰，我们直接来看JS部分；

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)

}

}

}

通过添加事件和自运行函数完成多个选项卡。