框架:
<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.οnlοad=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].οnmοuseοver=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.οnlοad=function(){
var allli=$("noticeTitle").getElementsByTagName("li"),
alldiv=$("noticeCon").getElementsByTagName("div");
for (var i = 0; i < allli.length; i++) {
allli[i].index=i;
allli[i].οnmοuseοver=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>