一、布局部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{padding: 0;margin:0;} li{list-style: none;} body{font-size: 12px;} a{text-decoration: none;} .notice{width: 298px;height: 98px;border: 1px solid #000; margin:60px auto;overflow: hidden;} .title{height: 27px;position: relative;cursor: pointer;} .title ul{position: absolute;width: 301px;left: -1px;} .title li{float: left;width: 58px;height: 26px;line-height: 26px;background: #F7F7F7;border-bottom: 1px solid #000;padding: 0 1px;overflow: hidden;text-align: center;} .title li a:link,.title li a:visited{color: #000;} .title li a:hover{color: #F90;} .title li.select{background: #FFF;border-bottom-color:#FFF;border-left: 1px solid #000; border-right: 1px solid #000;font-weight: bold;padding: 0;} .show{display: block;} .hidden{display: none;} #con div{width: 298px;height: 60px;} </style> </head> <body> <div id="notice" class="notice"> <div id="title" class="title"> <ul> <li class="select"><a href="#">公告</a></li> <li><a href="#">规则</a></li> <li><a href="#">论坛</a></li> <li><a href="#">安全</a></li> <li><a href="#">公益</a></li> </ul> </div> <div id="con" class="con"> <div class="show">aaaaaaaaa</div> <div class="hidden">bbbbbbbbbbbb</div> <div class="hidden">ccccccccc</div> <div class="hidden">dddddddddd</div> <div class="hidden">eeeeeeeeeee</div> </div> </div> </body> </html>
二、JS部分
1.普通切换
<script type="text/javascript"> window.onload=function () { //普通切换 var otitle=document.getElementById("title") var ali=otitle.getElementsByTagName("li") var ocon=document.getElementById("con") var adiv=ocon.getElementsByTagName("div") if(ali.length!=adiv.length) return; for (var i = 0; i < ali.length; i++) { ali[i].index=i ali[i].onmouseover=function () { for (var n = 0; n < ali.length; n++) { ali[n].className="" adiv[n].className="hidden" } this.className="select" adiv[this.index].className="show" } } } </script>
2.延迟切换
<script type="text/javascript"> //延迟切换 window.onload=function () { var otitle=document.getElementById("title") var ali=otitle.getElementsByTagName("li") var ocon=document.getElementById("con") var adiv=ocon.getElementsByTagName("div") var timer=null for (var i = 0; i < ali.length; i++) { ali[i].index=i ali[i].onmouseover=function () { var _this=this if (timer) { clearTimeout(timer) timer=null } timer=setTimeout(function () { for (var n = 0; n < ali.length; n++) { ali[n].className="" adiv[n].className="hidden" } ali[_this.index].className="select" adiv[_this.index].className="show" },300) } } } </script>
3.自动切换
<script type="text/javascript"> window.onload=function () { //自动切换 var otitle=document.getElementById("title") var ali=otitle.getElementsByTagName("li") var ocon=document.getElementById("con") var adiv=ocon.getElementsByTagName("div") var num=0; var timer=null function tab() { for (var i = 0; i < ali.length; i++) { ali[i].index=i ali[i].onmouseover=function(){ clearInterval(timer) changeOption(this.index) } ali[i].onmouseout=function () { timer=setInterval(autoPlay,1000) } } if (timer) { clearInterval(timer) timer=null; } //添加定时器高亮改变索引 timer=setInterval(autoPlay,1000) } tab() function changeOption(curIndex) { for (var n = 0; n < ali.length; n++) { ali[n].className="" adiv[n].className="hidden" } ali[curIndex].className="select" adiv[curIndex].className="show" num=curIndex //重新赋值 } function autoPlay() { num++ if (num>=ali.length) { num=0 } changeOption(num) } } </script>