在html中选项卡怎么做,基于JS实现网页中的选项卡(两种方法)

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

2019-01-07

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了基于JS实现网页中的选项卡(两种方法),编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

方法一:

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

选项卡

Box">

首页

产品

新闻

联系

我的

new1

new2

new3

new4

new5

new6

new7

new8

new9

new10

new11

new12

new13

new14

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

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

多个tab选项卡

tab2

tab3

内容1

内容2

内容3

tab2

tab3

内容1

内容2

内容3

tab2

tab3

内容1

内容2

内容3

tab2

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 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)

}

}

}

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

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值