JS选项卡自动切换怎么写? - 编程论坛

leeqihero2016-06-20 20:43

<head>
<meta charset="UTF-8" />
<style>
@charset "utf-8";
*{
    margin: 0px;
    padding: 0px;
}
body{
    width: 980px;
    min-height: 700px;
    font-size: 20px;
    font-weight: 700;
}
#container {
    margin: 30px auto;
}
#container > div{
    float: left;
    margin: auto 20px;
}
.menu{
    list-style: none;

}
.ka{
    width: 403px;
    height: 330px;
    border: 1px solid #ccc;
}
.tabs{
    width: 100px;
    height: 30px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    float: left;
    text-align: center;
    line-height: 30px;
}
.tabs:last-child{
    border-right: none;
}
.main{
    width: 100%;
    height: 300px;
    margin-bottom: 30px;
    /*background-color: #CCCCCC;*/
    clear: both;
    text-align: center;
    display: none;
}
.over{
    /*background-color: greenyellow;*/
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #ccc;
    border-top: 1px solid #a40000;
}
</style>
<script>
onload=function(){
    var oUl1 = document.getElementsByClassName('menu')[0];
    var oUl2 = document.getElementsByClassName('menu')[1];
    var aLi1 = oUl1.children;        //ka1的li集合
    var aLi2 = oUl2.children;        //ka1的l2集合
            //arr:选项卡节点集合. parent_id : 与选项卡相关联的DIV的父级ID.Auto:自动轮换开关(0/1),time:轮换时间设置;
    function onmouseover(arr,parent_id,Auto,times){
        var oParent =  document.getElementById(parent_id);
        var aParent = oParent.getElementsByTagName('div');
        var fnA = function (){
            for (var i = 0; i < arr.length; i++) {
                arr[i].index = i;
                arr[i].onmouseover = function (){
                    for (var i = 0; i < arr.length; i++) {
                        arr[i].className = 'tabs';
                        aParent[i].style.display = 'none';
                    }
                    this.className = ' tabs over';
                    aParent[this.index].style.display = 'block';
                }
            }
        }
var t = null;        //定时器
if(Auto){
                    //当鼠标离开选项卡区域2秒后,激活定时器
    oParent.onmouseout = function (){
        setTimeout(function (){
                            /*
                             *这里要怎么写?
                             *
                             *
                             *
                             * */
        },2000);
    }
                    //鼠标在选项卡上时,禁用定时器,并执行fnA()
    oParent.onmouseover = function (){
        clearInterval(t);
        fnA();
    }
}
else {    //设置为手动时
    fnA();
}
}
onmouseover(aLi1,'ka1',1,3000);
onmouseover(aLi2,'ka2',0);
}
</script>
</head>
<body>
    <div id="container" class="container">
        <div id="ka1" class="ka">
            <ul class="menu">
                <li class="tabs over">AAA</li>
                <li class="tabs">BBB</li>
                <li class="tabs">CCC</li>
                <li class="tabs">DDD</li>
            </ul>
            <div class="main" style="display: block;">AAA</div>
            <div class="main">BBB</div>
            <div class="main">CCC</div>
            <div class="main">DDD</div>
        </div>
        <div id="ka2" class="ka">
            <ul class="menu">
                <li class="tabs over">AAA</li>
                <li class="tabs">BBB</li>
                <li class="tabs">CCC</li>
                <li class="tabs">DDD</li>
            </ul>
            <div class="main" style="display: block;">AAA</div>
            <div class="main">BBB</div>
            <div class="main">CCC</div>
            <div class="main">DDD</div>
        </div>
    </div>
</body>
</html>