网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。
方法一：
方法一利用简单的代码即可实现，以下是全部的代码；
选项卡
*{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
首先我们在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部分：
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选项卡
* {
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部分；
通过添加事件和自运行函数完成多个选项卡。
