基于JS实现网页中的选项卡（两种方法）
前端之家收集整理的这篇文章主要介绍了
基于JS实现网页中的选项卡（两种方法），
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。
方法一利用简单的代码即可实现，以下是全部的代码；
<
Meta charset="UTF-8">
选项卡
Box">
@H_
403_18@new1
@H_
403_18@new2
@H_
403_18@new3
@H_403_18@new10
@H_403_18@new11
@H_403_18@new12
@H_403_18@new13
@H_403_18@new14
@H_403_18@new15
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种比较重要的知识点：自运行函数
定义函数a();给整个函数带上括号，后面的括号为输入参数；
以下为方法二自运行函数的程序：
<
Meta charset="UTF-8">
多个tab选项卡
@H_403_18@tab2
@H_
403_18@tab3
内容1
内容2
内容3
@H_403_18@tab2
@H_
403_18@tab3
内容1
内容2
内容3
@H_403_18@tab2
@H_
403_18@tab3
内容1
内容2
内容3
@H_403_18@tab2
@H_
403_18@tab3
内容1
内容2
内容3
和方法一相似先写HTML里的内容，CSS部分对HTML进行修饰，我们直接来看JS部分；
window.onload = function() {
tab("tabMain",event) {
var oDiv = document.getElementById(id);
var oBtn = oDiv.getElementsByTagName("li");
var o
Box = 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 = '';
o
Box[i].className = 'tabSide';
}
this.className = 'active';
o
Box[index].className = 'active';
});//
添加事件监听
})(i)
}
}
}
通过添加事件和自运行函数完成多个选项卡。
