实现按钮点击切换
(1)HTML布局
<div id="tabs">
<ul>
<li class="on">Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
<div>
Life is always so we covered all over with cuts and bruises,
but later, the injured area will become the strong place.
</div>
<div class="hide">
Books are the stepping stones to human progress.
</div>
<div class="hide">
Always bear in mind that your own resolution to success is more important than any one thing .
</div>
</div>
(2)制作css样式
*{
margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px;
}
#tabs{
background: #ffffff; padding: 50px; width: 300px; height: 200px;
}
#tabs ul{
border-bottom: 2px saddlebrown solid; list-style: none;text-align: center; height: 30px;
}
#tabs ul li{
float: left; width:80px; border: 1px solid darkgrey;border-bottom: none; height: 20px; padding: 4px; margin:0 5px 0 2px; cursor: pointer;
}
#tabs ul li.on{
border-top: 2px saddlebrown solid; border-bottom: 2px white solid;
}
#tabs div{
line-height: 24px; padding: 10px;border: 1px steelblue solid; border-top: none;
}
.hide{
display: none;
}
(3)JS实现tab切换
var oTabs = document.getElementById("tabs");
var oUl = oTabs.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
var oDiv = oTabs.getElementsByTagName("div");
var len = oLi.length;
for(var i=0;i<len;i++){
oLi[i].index = i;
oLi[i].onclick = function(){
for(var n=0; n<len ; n++){
oLi[n].className="";
oDiv[n].className="hide";
}
this.className="on";
oDiv[this.index].className="";
}
}