日期:2014-05-16 浏览次数:20329 次
boxNav ul{
padding:0;
margin:0;
}
.boxNav ul li{
width:150px;
border:none;
list-style:none;
float:left;
cursor:pointer;
text-align:left;
font-size:20px;
}
.boxContent{
width:800px;
height:400px;
}
.see{
display:block;
}
.nosee{
display:none;
}
.normaltab{
color:#FF0000;
background-color:#FFFFFF;
display:block;
}
.hovertab{
color:#444444;
font-weight:400;
display:block;
background-color:#CCCCCC;
}
<div class="box">
<div class="boxNav" id="boxNav"><!--选项卡部分-->
<ul>
<li id="boxNav1" class="hovertab" onclick="clickNav(1)">标签1</li>
<li id="boxNav2" class="normaltab" onclick="clickNav(2)">标签2</li>
<li id="boxNav3" class="normaltab" onclick="clickNav(3)">标签3</li>
<li id="boxNav4" class="normaltab" onclick="clickNav(4)">标签4</li>
</ul>
</div>
<div class="boxContent">
<div class="see" id="boxContent1"><!--第一个标签里的内容--></div>
<div class="nosee" id="boxContent2"><!--第二个标签里的内容-->在这里触发了一个action</div>
<div class="nosee" id="boxContent3"><!--第三个标签里的内容--></div>
<div class="nosee" id="boxContent4"><!--第四个标签里的内容--></div>
</div>
</div>
function $(id){return document.getElementById(id);}
function clickNav(n){
for(i=1;i<=4;i++){
$('boxNav'+i).className='normaltab';
$('boxContent'+i).className='nosee';
}
$('boxNav'+n).className='hovertab';
$('boxContent'+n).className='see';
}