文档章节

选项卡

暴躁的犀牛
 暴躁的犀牛
发布于 2017/04/13 22:34
字数 872
阅读 2
收藏 0
<!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>

 

© 著作权归作者所有

共有 人打赏支持
暴躁的犀牛
粉丝 1
博文 3
码字总数 2083
作品 0
浦东
私信 提问

暂无文章

带你看数据挖掘与机器学习-厦大EDP上课出勤预测

带你看数据挖掘与机器学习-厦大EDP上课出勤预测 标签: 数据挖掘 特征工程 机器学习 出勤预测 write by xmhexi 2019/3/22 内容提要 首先说明本文是一篇科普文章,通过一个实际案例,帮助理解什...

xmhexi
今天
43
0
IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
今天
4
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
3
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
10
0
java多线程2

“非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在线程安全问题。这是因为方法内部的变量都是私有造成的。 synchronized 获取的都是对象锁。如果多个线程访问多个...

一滴水穿石
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部