Tab选项卡

布局样式：

<style type="text/css">
*{margin: 0px;padding:0px; font-size:12px; text-decoration: none;} //整体页面样式
#container{width: 412px;margin: 0px auto;} //容器的样式
/*容器居中显示*/
ul li{list-style-type: none;} //祛除页面上显示的标记
#nav_tab{width: 100%;height: 26px;}
#nav_tab li{float: left; width: 98px;height: 26px;padding-right: 5px;}
#nav_tab li a{display:block;width: 100%;height: 100%;text-align:center;line-height:26px;}
.curr_nav a{color: #00f;background: url("../images/btn1.png") no-repeat 0 0;}
.nav_link a{ color: #333; background: url("../images/btn2.png") no-repeat 0 0;}
#nav_down{height: 100px;text-align: left;}
.dis{display: block;}
.undis{display: none;}
img{ width:412px; height:200px}
</style>

js控制：

<script type="text/javascript">
window.onload = function() {
var subs = document.getElementById("nav_down").getElementsByTagName("div"); //查找nav_down标记下的所有DIV（数组）
var lis = document.getElementsByTagName("li"); //查找所有的li元素
for (var i = 0; i < subs.length; i++) {
if (i == 0) {
subs[i].className = "dis"; //如果当前元素下表恒等于0，则修显示当前的元素下对应的DIV
}
else {
subs[i].className = "undis"; //其他的div 隐藏掉
}
}
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
var index = this.id; //根据id找到显示的下标
for (var i = 0; i < subs.length; i++) {
if (i == index) { //如果当前下标恒等于0
lis[index].className = "curr_nav"; //给当前的TAB动态添加class
subs[index].className = "dis"; //给当前TAB对应的div
}
else {
lis[i].className = "nav_link"; //其他元素隐藏掉
subs[i].className = "undis";
}
}
}
}
}
</script>

页面 html：

<div id="container">
<ul id="nav_tab">
<li class="curr_nav" id="0"><a href="#">春</a></li>
<li class="nav_link" id="1"><a href="#">夏</a></li>
<li class="nav_link" id="2"><a href="#">秋</a></li>
<li class="nav_link" id="3"><a href="#">冬</a></li>
</ul>
<div id="nav_down">
<div>
<img src="../images/春.jpg" /></div>
<div>
<img src="../images/夏.jpg" /></div>
<div>
<img src="../images/秋.jpg" /></div>
<div>
<img src="../images/冬.jpg" /></div>
</div>
</div>