布局样式：
<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>
转载于:https://www.cnblogs.com/fengmingming/p/4210968.html
相关资源：jquery iframe动态添加删除tab选项卡