首先是css样式，比如这样的：
1 <style>
2 *{
3 margin:0;
4 padding: 0;
5 list-style: none;
6 font-size: 12px;
7 }
8 .notice{
9 width: 298px;
10 height: 98px;
11 margin: 10px;
12 border:1px solid #7c7c7c;
13 overflow: hidden;
14 }
15 .notice-tit{
16 height: 27px;
17 background-color: #eaeaea;
18 position: relative;
19 }
20 .notice-tit ul{
21 position: absolute;
22 width: 300px;
23 left: -1px;
24 }
25
26 .notice-tit ul li{
27 float: left;
28 width: 58px;
29 height: 26px;
30 line-height: 26px;
31 text-align: center;
32 border-bottom: 1px solid #7c7c7c;
33 padding: 0 1px;
34 }
35 .notice-tit ul a{
36 text-decoration: none;
37 display: block;
38 }
39 .notice-tit ul .select{
40 background-color: white;
41 border-right: 1px solid #7c7c7c;
42 border-left: 1px solid #7c7c7c;
43 border-bottom: 1px solid white;
44 padding: 0;
45 }
46 /*.notice-tit ul li:hover{
47 background-color: white;
48 border-right: 1px solid #7c7c7c;
49 border-left: 1px solid #7c7c7c;
50 border-bottom: 1px solid white;
51 padding: 0;
52 }*/
53 </script>
注意: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 <div class="notice"> 2 <div class="notice-tit" id="notice-tit"> 3 <ul> 4 <li class="select"><a href="#">公告</a></li> 5 <li><a href="#">规则</a></li> 6 <li><a href="#">论坛</a></li> 7 <li><a href="#">安全</a></li> 8 <li><a href="#">公益</a></li> 9 </ul> 10 </div> 11 <div class="notice-con" id="notice-con"> 12 <div style="display: block">我是内容1</div> 13 <div style="display: none">我是内容2</div> 14 <div style="display: none">我是内容3</div> 15 <div style="display: none">我是内容4</div> 16 <div style="display: none">我是内容5</div> 17 </div> 18 </div>
首先定个小目标比如实现简单的点击或者悬浮的TAB切换：
1.获取#notice-tit下面的所有li节点，获取#notice-con下面的所有div节点。
2.遍历#notice-tit下面的所有li节点并添加ID和悬浮或者点击事件。
添加id的作用是悬浮在当前ID上时对应的显示.notice-con内的div。
1 <script>
2 //获取id封装成一个函数$()方便调用
3 function $(id){
4 //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
5 return typeof id==="string"?document.getElementById(id):id;
6 }
7 //window.onload表示当文档加载完毕时执行函数
8 window.onload=function(){
9 //获取#notice-tit下面的全部li元素
10 var titles=$(\'notice-tit\').getElementsByTagName(\'li\');
11 //获取#notice-con下面的全部div元素
12 var divs=$(\'notice-con\').getElementsByTagName(\'div\');
13 //遍历所有li标签，给每个li加上id和值，并且绑定事件
14 for(var i=0;i<titles.length;i++){
15 //给每个li加上id和值
16 titles[i].id=i;
17 //给每个li绑定事件
18 titles[i].onmouseover=function(){
19 //悬浮后首先应该初始化每个li和div上的类和display
20 for(var j=0;j<titles.length;j++){
21 titles[j].className="";
22 divs[j].style.display="none";
23 }
24 //给当前悬浮元素添加属性
25 titles[this.id].className="select";
26 divs[this.id].style.display="block";
27 }
28 }
29 }
30 </script>
初步效果实现了，如果需要点击效果把上面的onmouseover改为onclick。一般的tab标签有个延时的效果，更有利于用户体验，下面来加个定时器。
1 <script>
2 //获取id封装成一个函数$()方便调用
3 function $(id){
4 //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
5 return typeof id==="string"?document.getElementById(id):id;
6 }
7 //window.onload表示当文档加载完毕时执行函数
8 window.onload=function(){
9 //获取#notice-tit下面的全部li元素
10 var titles=$(\'notice-tit\').getElementsByTagName(\'li\');
11 //获取#notice-con下面的全部div元素
12 var divs=$(\'notice-con\').getElementsByTagName(\'div\');
13 //遍历所有li标签，给每个li加上id和值，并且绑定事件
14 var timer=null;
15 for(var i=0;i<titles.length;i++){
16 //给每个li加上id和值
17 titles[i].id=i;
18 //给每个li绑定事件
19 titles[i].onmouseover=function(){
20 //this指向当前悬浮的对象并存进变量that中,用that做一个this的引用
21 var that=this;
22 //当存在定时器的时候我们需要把它清除,如果悬浮的时间少于500毫秒，
23 //则不会执行后面的函数，一般定时器前面都需要有个清除的步骤。
24 if(timer){
25 //清除定时器
26 clearTimeout(timer);
27 //初始化变量的值
28 timer=null;
29 }
30 //设置定时器，执行函数的时间延迟了500毫秒
31 timer=setTimeout(function(){
32 //悬浮后首先应该初始化每个li和div上的类和display
33 for(var j=0;j<titles.length;j++){
34 titles[j].className="";
35 divs[j].style.display="none";
36 }
37 //给当前悬浮元素添加属性
38 //这个地方不能用this.id了，因为this指向了window这个对象了,
39 titles[that.id].className="select";
40 divs[that.id].style.display="block";},500);
41 }
42 }
43 }
44 </script>
下面来实现一个标签页轮播的效果
思路:设置一个索引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<titles.length;i++){
18 titles[i].className="";
19 divs[i].style.display="none";
20 }
21 //给索引为index的节点去添加样式
22 titles[index].className="select";
23 divs[index].style.display="block";
24 },2000);
25 }
终极目标来了：tab悬浮切换+延时效果+自动轮播
1 <script>
2 //获取id封装成一个函数$()方便调用
3 function $(id){
4 //如果传入的参数类型为字符串则获取当前ID元素，否则返回id
5 return typeof id==="string"?document.getElementById(id):id;
6 }
7 function tab(){
8 //声明 索引index，两个变量来装定时器，一个轮播定时器，一个延时定时器
9 var index=0,timer=null,timer2=null;
10 var titles=$(\'notice-tit\').getElementsByTagName(\'li\');
11 var divs=$(\'notice-con\').getElementsByTagName(\'div\');
12 for(var j=0;j<titles.length;j++){
13 //给每个li设置ID
14 titles[j].id=j;
15 //给每个li绑定悬浮事件
16 titles[j].onmouseover=function(){
17 //悬浮时首先清除延时定时器
18 clearInterval(timer);
19 //清除轮播定时器
20 clearTimeout(timer2);
21 //初始化两个定时器
22 timer2=null;
23 timer=null;
24 //this的一个引用，因为在setTimeout中this指向window对象
25 var that=this;
26 //创建一个延时定时器
27 timer2=setTimeout(function(){
28 for(var i=0;i<titles.length;i++){
29 titles[i].className="";
30 divs[i].style.display="none";
31 }
32 titles[that.id].className="select";
33 divs[that.id].style.display="block";
34 //鼠标悬浮时改变index的值为当前的id
35 index=that.id;
36 },500);
37 }
38 //给每个Li绑定鼠标离开时的事件
39 titles[j].onmouseout=function(){
40 //创建一个轮播定时器,离开时轮播能继续进行,因为上面设置了index=that
41 //所以鼠标离开后会自动播放下一个tab
42 timer=setInterval(function(){
43 index++;
44 if(index>=titles.length){
45 index=0;
46 }
47 for(var i=0;i<titles.length;i++){
48 titles[i].className="";
49 divs[i].style.display="none";
50 }
51 titles[index].className="select";
52 divs[index].style.display="block";
53 },2000);
54 }
55 }
56 //创建之前看是否存在轮播定时器，有就清除掉
57 if(timer){
58 clearInterval(timer);
59 timer=null;
60 }
61 //创建一个轮播定时器
62 timer=setInterval(function(){
63 index++;
64 if(index>=titles.length){
65 index=0;
66 }
67 for(var i=0;i<titles.length;i++){
68 titles[i].className="";
69 divs[i].style.display="none";
70 }
71 titles[index].className="select";
72 divs[index].style.display="block";
73 },2000);
74 }
75 tab();
76 </script>
做这个标签页demo的过程中感觉单独的功能做出来还是比较能理解，难理解的是把三个功能做在一起，重复做了几遍，经常会卡壳，不知道下一步的思维逻辑。下一步终极+目标是代码优化了，上面的代码太多的重复，后续如何，下回分解。