选项卡

最新推荐文章于 2023-07-12 23:55:28 发布
chuicenzhuo5414
最新推荐文章于 2023-07-12 23:55:28 发布
阅读量78
点赞数
原文链接：https://my.oschina.net/u/3426261/blog/879253
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #eee;
            font-size: 12px;
        }
        .tab{
            width: 298px;
            height: 98px;
            background-color: #fff;
            margin: 100px;
            border: 1px solid #fff;
            overflow: hidden;
        }
        .tab-title{
            width: 300px;
            height: 26px;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #3c3c3c;
        }
        .tab-title ul li {
            float: left;
            width: 60px;
            height: 26px;
            line-height: 26px;
            text-align: center;
        }
        .tab-title ul li a:hover{
            color: orangered;
        }
        .tab-title ul li.select{
            border-bottom:3px solid orangered ;
        }
        .tab-content ul li a:hover{
            color: orangered;
        }
        .tab-content{
            width: 300px;
        }
        .tabct{
            margin: 20px 10px;
            overflow: hidden;
        }
        .tabct ul li{
            float: left;
            width: 140px;
            height: 25px;
        }

    </style>
</head>
<body>
<div class="tab" id="tab">
    <div id="tab-title" class="tab-title">
        <ul>
            <li data-flag="0" class="select"><a href="#">公告</a></li>
            <li data-flag="1"><a href="#">规则</a></li>
            <li data-flag="2"><a href="#">论坛</a></li>
            <li data-flag="3"><a href="#">安全</a></li>
            <li data-flag="4"><a href="#">公益</a></li>
        </ul>
    </div>
    <div id="tab-content" class="tab-content">
        <div class="tabct" style="display: block">
        <ul>
            <li><a href="#">马云IT领袖峰会主题</a></li>
            <li><a href="#">马云IT领袖峰会主题</a></li>
            <li><a href="#">马云IT领袖峰会主题</a></li>
            <li><a href="#">马云IT领袖峰会主题</a></li>

        </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">成人用品行业标准变更</a></li>
                <li><a href="#">成人用品行业标准变更</a></li>
                <li><a href="#">成人用品行业标准变更</a></li>
                <li><a href="#">成人用品行业标准变更</a></li>

            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">全球购市场管理规范变</a></li>
                <li><a href="#">全球购市场管理规范变</a></li>
                <li><a href="#">全球购市场管理规范变</a></li>
                <li><a href="#">全球购市场管理规范变</a></li>

            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">淘宝大学数据特训营</a></li>
                <li><a href="#">淘宝大学数据特训营</a></li>
                <li><a href="#">淘宝大学数据特训营</a></li>
                <li><a href="#">淘宝大学数据特训营</a></li>

            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">淘宝招募志愿者</a></li>
                <li><a href="#">淘宝招募志愿者</a></li>
                <li><a href="#">淘宝招募志愿者</a></li>
                <li><a href="#">淘宝招募志愿者</a></li>

            </ul>
        </div>
    </div>
</div>
<script>
   /* //1获取当前父级元素
    var lilist = document.getElementById('tab-title').getElementsByTagName('li');
    var tabcontent =document.getElementsByClassName('tabct');
    var timer = null;
            //console.log(lilist);
    //2为每一个li标签添加事件
    for(var i = 0;i<lilist.length;i++){
        //10为每个元素添加一个唯一表示
        lilist[i].index = i;
        //3理解事件原理   tabList[i].onmouseover:事件注册
        lilist[i].onmouseover = function(event){
                //console.log(lilist[i]);
            //8.改变this指向
            tath = this;
            //7添加延时处理
            timer =setTimeout(function(){
            //5先循环清空数据
            for(var j = 0 ;j<lilist.length;j++){
                lilist[j].className="";
                tabcontent[j].style.display = "none";
            }
                //4在为当前选中元素添加样式
                tath.className = "select";
                //6更换tab对应的内容区域
                tabcontent[tath.dataset.flag].style.display = "block";
        },300)
        };
        //9如果在鼠标滑动快速到下一个，当前的延时还没有执行，就不让他执行了
        lilist[i].onmouseout = function () {
            clearTimeout(timer);
        }



    }*/




   //1获取当前父级元素
   var lilist = document.getElementById('tab-title').getElementsByTagName('li');
   var tabcontent =document.getElementsByClassName('tabct');
   var timer = null;
   //console.log(lilist);
   //2为每一个li标签添加事件
   for(var i = 0;i<lilist.length;i++){
       //3理解事件原理   tabList[i].onmouseover:事件注册
       lilist[i].onmouseover = (function(i){
            return function(event){
           //var  vet = function(event){
               //console.log(lilist[i]);
                //7添加延时处理
               timer =setTimeout(function(){
                   //5先循环清空数据
                   for(var j = 0 ;j<lilist.length;j++){
                       lilist[j].className="";
                       tabcontent[j].style.display = "none";
                   }
                   //4在为当前选中元素添加样式
                   lilist[i].className = "select";
                   //6更换tab对应的内容区域
                   tabcontent[i].style.display = "block";
               },300)
           };
           //return vet;
       })(i);
           //9如果在鼠标滑动快速到下一个，当前的延时还没有执行，就不让他执行了
           lilist[i].onmouseout = function () {
               clearTimeout(timer);
           }
   }










</script>
</body>
</html>
转载于:https://my.oschina.net/u/3426261/blog/879253