整理用js实现tab标签页

2021-01-27 20:15

阅读：535

首先是css样式，比如这样的：

注意:1.需要给.notice-tit这个盒子设置相对定位，ul设置绝对定位并且left:-1px(如果不设置-1，ul这个盒子不会和.notice-tit这个盒子完全重叠，因为.notice-tit有个1px 的边框);

　　　2.要给ul下面的li标签设置左右padding 1px；当悬浮的时候出现左右1px的border，同时把当前悬浮的li左右padding设置为0,这样悬浮的时候不会因为li加了2px的左右边框而导致宽度增加;

然后是HTML结构：

 1 
 2         
 3             
 4                 公告
 5                 规则
 6                 论坛
 7                 安全
 8                 公益
 9             
10         
11         
12             我是内容1
13             我是内容2
14             我是内容3
15             我是内容4
16             我是内容5
17         
18

首先定个小目标比如实现简单的点击或者悬浮的TAB切换：

1.获取#notice-tit下面的所有li节点，获取#notice-con下面的所有div节点。

2.遍历#notice-tit下面的所有li节点并添加ID和悬浮或者点击事件。

　添加id的作用是悬浮在当前ID上时对应的显示.notice-con内的div。

技术图片

初步效果实现了，如果需要点击效果把上面的onmouseover改为onclick。一般的tab标签有个延时的效果，更有利于用户体验，下面来加个定时器。

技术图片

下面来实现一个标签页轮播的效果

思路:设置一个索引index=0，和一个定时器timer，在定时器setInterval()中隔2秒不停的去把索引加一，然后根据索引找到对应的元素节点进行操作,注意index不能无限的增加，最大值根据li的数量来决定。

 1     window.onload=function(){
 2         var titles=$(‘notice-tit‘).getElementsByTagName(‘li‘);
 3         var divs=$(‘notice-con‘).getElementsByTagName(‘div‘);
 4         //声明一个空的变量来储存定时器
 5         var timer=null;
 6         //索引值，初始值为0
 7         var index=0;
 8         //设置一个定时器,每隔2秒去执行函数
 9         timer=setInterval(function(){
10         //每执行一次index加一
11             index++;
12         //设置index的最大值，超过则设为0
13             if(index>=titles.length){
14                 index=0;
15             }
16         //添加样式前应初始化全部样式
17             for(var i=0;i

技术图片