Tab选项卡切换

框架：

<div id="notice">
<div id="noticeTitle">
<ul>
<li ><a href="#">热点</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">娱乐</a></li>
<li class="select"><a href="#">游戏</a></li>
</ul>
</div>
<div id="noticeCon">
<div class="noticeContent" style="display:block"><ul></ul></div>
<div class="noticeContent" style="display:none"><ul></ul></div>
<div class="noticeContent" style="display:none"><ul></ul></div>
<div class="noticeContent" style="display:none"><ul></ul></div>
<div class="noticeContent" style="display:none"><ul></ul></div>
</div>
</div>

CSS要点：

noticeTitle为relative，noticeTitle下的ul为absolute，noticeTitle下的ul需要left:-1px，用来使首个选项卡的左border与noticeTitle的左border重合遮盖

select的选项卡取消左右padding，增加左右border

noticeTitle的border宽+noticeTitle的宽度===每个li的宽度+border宽度+左右padding(如noticeTitle的宽度398+1px的border*2=400，noticeTitle下的ul为78宽度*5+2*5=400，因为noticeTitle的左border为1px，所以noticeTitle下的ul需要left:-1px使得两者400px重合)

noticeTitle的height=30px，noticeTitle下的ul下的li的height为29，border-bottom为1，li中的line-height为29

JavaScript：

function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
var allli=$("noticeTitle").getElementsByTagName("li"),
alldiv=$("noticeCon").getElementsByTagName("div");
for (var i = 0; i < allli.length; i++) {
allli[i].id='allli'+i;
allli[i].onmouseover=function(){
var that=this;
for (var j = 0; j <alldiv.length ; j++) {
alldiv[j].style.display="none";
allli[j].className="";
alldiv[j].id='allli'+j;
};
alldiv[that.id].style.display="block";
allli[that.id].className="select";
};
};};

CSS：

*{margin:0;padding:0;list-style:none;font-size:16px;}
#notice{width: 398px;height: 150px;margin: 10px;border: 1px green solid;/*overflow: hidden;*/}
#noticeTitle{height: 30px;position: relative;background: #f7f7f7;}
#noticeTitle ul {position: absolute;width: 400px;left:-1px;}
#noticeTitle ul li{float: left;display: block;width: 78px;height: 29px;line-height: 29px;text-align: center;border-bottom: 1px green solid;padding:0 1px}
#noticeTitle ul li a{text-decoration: none;color: black;}
#noticeTitle ul li.select{background: #FFF;border-bottom:1px #FFF solid;border-right:1px green solid;border-left:1px green solid; padding:0;font-weight:bolder;}

JavaScript：

var allli=document.getElementsByTagName("li");
allli['abc']可以获得<li id='abc'>xxxx</ li>这个标签

JavaScript改进版：

<script type="text/javascript">
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
var allli=$("noticeTitle").getElementsByTagName("li"),
alldiv=$("noticeCon").getElementsByTagName("div");
for (var i = 0; i < allli.length; i++) {
allli[i].index=i;
allli[i].onmouseover=function(){
for (var j = 0; j <alldiv.length ; j++) {
alldiv[j].style.display="none";
allli[j].className="";
};
alldiv[this.index].style.display="block";
this.className="select";
};
};};
</script>