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