选项卡

一、布局部分

<!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>

敢想，敢做