作者:手机用户2502853201 | 来源:互联网 | 2022-09-08 13:07
网页中经常会用到选项卡这种东东,说白了就是点击一个选项,下面会弹出这个选项里的内容。
方法一:
方法一利用简单的代码即可实现,以下是全部的代码;
首先我们在HTML部分定义网页选项卡中的内容。
CSS部分对HTML中的内容进行修饰:
最后是最重要的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();给整个函数带上括号,后面的括号为输入参数;
以下为方法二自运行函数的程序:
和方法一相似先写HTML里的内容,CSS部分对HTML进行修饰,我们直接来看JS部分;
通过添加事件和自运行函数完成多个选项卡。