<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab选项卡扩展</title>
<style type="text/css">
html,body,div,ul,li,span,h2,p {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei', Arial;
list-style: none;
display: block;
}
.fix:after,
.fix:before {
display: table;
content: '';
}
.fix:after {
clear: both;
}
.fix {
zoom: 1;
}
#tab {
300px;
background: #eaeaea;
margin: 50px auto;
padding: 30px;
overflow: hidden;
}
#tab ul li {
90px;
height: 72px;
padding-top: 18px;
margin: 5px;
background: #1f1f1f;
color: #fff;
text-align: center;
line-height: 26px;
float: left;
cursor: pointer;
}
#tab ul li.current {
background: #fff;
color: #1f1f1f;
}
#tab p {
margin-top: 10px;
font-size: 18px;
}
</style>
<script type="text/javascript">
window.onload = tab;
function tab() {
var txt = [
'爆竹声中一岁除，春风送暖入屠苏',
'春风疑不到天涯，二月山城未见花',
'洛阳三月花如锦，多少功夫织得成',
'四月南风大麦黄，枣花未落桐荫长',
'五月榴花照眼明，枝间时见子初成',
'六月禾未秀，官家己修仓',
'未会牵牛意若何，须邀织女弄金梭',
'莫湃边地比京都，八月严霜草己枯',
'九月天山风似刀，城南猎马缩寒毛',
'十月清霜重，飘零何处归',
'冬暖而儿号寒，年丰而妻啼饥',
'腊后花期知渐近，寒梅巳作东风信'
];
var oDiv = document.getElementById("tab");
var aLi = oDiv.getElementsByTagName("li");
var aDiv = oDiv.getElementsByTagName("div")[0];
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function () {
for(var j = 0; j < aLi.length; j++) {
aLi[j].className = "";
}
this.className = "current";
aDiv.innerHTML = "<h2>" + (this.index + 1) + "月</h2><p>" + txt[this.index] + "</p>";
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul class="fix">
<li class="current"><span>一月</span><span>Jan</span></li>
<li><span>二月</span><span>Feb</span></li>
<li><span>三月</span><span>Mar</span></li>
<li><span>四月</span><span>Apr</span></li>
<li><span>五月</span><span>May</span></li>
<li><span>六月</span><span>Jun </span></li>
<li><span>七月</span><span>Jul</span></li>
<li><span>八月</span><span>Aug </span></li>
<li><span>九月</span><span>Sep</span></li>
<li><span>十月</span><span>Oct</span></li>
<li><span>十一月</span><span>Nov</span></li>
<li><span>十二月</span><span>Dec</span></li>
</ul>
<div>
<h2>一月</h2>
<p>爆竹声中一岁除，春风送暖入屠苏</p>
</div>
</div>
</body>
</html>