微客导航 » 文章资讯 » 基于JS实现网页中的选项卡（两种方法）

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

2024-02-19 18:12:06 242

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

方法一：

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





选项卡

*{margin:0;padding:0;}
#box{width:600px;background:#ccc;margin:0auto;}
li{list-style:none;}
#ul1{display:block;width:100%;overflow:hidden;}
#ul1li{width:110px;height:40px;background:#4cfed2;float:left;margin-left:8px;text-align:center;line-height:40px;}
#content{width:100%;margin-top:20px;}
#contentdiv{display:none;}
#contentdiv.active{display:block;}
.show{background:red;}





首页
产品
新闻
联系
我的




new1
new2
new3

new4
new5
new6

new7
new8
new9

new10
new11
new12

new13
new14
new15

window.onload=function(){ varoli=document.getElementById("ul1").getElementsByTagName("li"); //alert(oli.length); varodiv=document.getElementById("content").getElementsByTagName("div"); //alert(odiv.length) for(vari=0;i

首先我们在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:0auto;}
li{list-style:none;}
#ul1{display:block;width:100%;overflow:hidden;}
#ul1li{width:110px;height:40px;background:#4cfed2;float:left;margin-left:8px;text-align:center;line-height:40px;}
#content{width:100%;margin-top:20px;}
#contentdiv{display:none;}
#contentdiv.active{display:block;}
.show{background:red;}

最后是最重要的js部分：


window.onload=function(){
varoli=document.getElementById("ul1").getElementsByTagName("li");
//alert(oli.length);
varodiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素
//alert(odiv.length)
for(vari=0;i

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种比较重要的知识点：自运行函数

(functiona(){
//函数里的内容
})(参数);

定义函数a();给整个函数带上括号，后面的括号为输入参数；

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





多个tab选项卡






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部分；

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐