zoukankan      html  css  js  c++  java
  • 自己写的选项卡tab

    样式:

    <style>
    body,div,ul,li{padding:0;margin:0;}
    li{list-style:none;}
    .tab_mt{
        position:relative;
        width:600px;
        margin:20px 50px;
    }
    .tab{
        width:600px;
    }
    .tab li{
        float:left;
        text-align:center;
        background:#FFF;
    }
    .tab a{
        height:30px;
        line-height:28px;
        padding:0 13px;
        color:#666;
        text-decoration:none;
    }
    
    .tab .cur{
        height:33px;
        border-left:1px solid #666;
        border-right:1px solid #666;
        border-top: 2px solid #e4393c;
        border-bottom:none;
        margin-top:-4px;
        margin-bottom:-1px;
    }
    .tab .cur a{
        color:#e4393c;
    }
    
    .tab_mt .tab_content{
        width:600px;
        height:500px;
        border:1px solid #666;
        background:#fff;
        display:none;
    }
    
    .tab_mt .cur_content{
        display:block;
    }
    .clear:after{
        clear:both;
        content:"";
        display:block;
        visibility:hidden;
    }
    </style>

    结构部分:

    <div class="tab_mt">
        <ul class="tab clear">
            <li class="cur"><a href="#">商品介绍</a></li>
            <li><a href="#">规格参数</a></li>
            <li><a href="#">包装清单</a></li>
            <li><a href="#">商品评价</a></li>
        </ul>
        <div class="tab_content cur_content">
            <p>商品介绍商品介绍商品介绍商品介绍</p>
        </div>
        <div class="tab_content">
            <p>规格参数规格参数规格参数规格参数</p>
        </div>
        <div class="tab_content">
            <p>包装清单包装清单包装清单包装清单</p>
        </div>
        <div class="tab_content">
            <p>商品评价商品评价商品评价商品评价</p>
        </div>
    </div>

    js代码部分:

    window.onload = function(){
        
        var oTab = getByClass(document,"tab_mt")[0];
        var aTabLi = oTab.getElementsByTagName("li");
        var aTabContent = getByClass(oTab,"tab_content");
        
        for(var i = 0 ; i < aTabLi.length ; i++){
            aTabLi[i].index = i;
            aTabLi[i].onmouseover = function(){
                for(var i = 0 ;i<aTabLi.length; i ++){
                    removeClass(aTabLi[i],"cur");
                    removeClass(aTabContent[i],"cur_content");
                };
                addClass(this,"cur");
                addClass(aTabContent[this.index],"cur_content");
            };
        };
        
        function getByClass(oParent,sClass){
            var aChild = oParent.getElementsByTagName("*"),
                result = [];
            for(var i =0;i<aChild.length;i++){
                if(aChild[i].className.match(new RegExp("(\s|^)" + sClass+ "(\s|$)"))){ //判断是否有该class
                    result.push(aChild[i]);
                };
            };
            return result;
        };
        
        function addClass(obj,sClass){
            var reg = new RegExp("(\s|^)" + sClass+ "(\s|$)");
            if(!obj.className.match(reg)){
                obj.className += " " + sClass;
            };
        }
        
        function removeClass(obj,sClass){
            var reg = new RegExp("(\s|^)" + sClass+ "(\s|$)");
            if(obj.className.match(reg)){ //判断是否有该class
                    obj.className = obj.className.replace(reg,"");
            }else{
                return "alert('没有该class!')"
            };
        };
        
    };

     

  • 相关阅读:
    把git项目放到个人服务器上
    关于fcitx无法切换输入法的问题解决
    博客变迁通知
    (欧拉回路 并查集 别犯傻逼的错了) 7:欧拉回路 OpenJudge 数据结构与算法MOOC / 第七章 图 练习题(Excercise for chapter7 graphs)
    (并查集) HDU 1856 More is better
    (并查集 不太会) HDU 1272 小希的迷宫
    (并查集 注意别再犯傻逼的错了) HDU 1213 How Many Tables
    (最小生成树 Kruskal算法) 51nod 1212 无向图最小生成树
    (并查集) HDU 1232 畅通工程
    (最小生成树 Prim) HDU 1233 还是畅通工程
  • 原文地址:https://www.cnblogs.com/fyima/p/3723731.html
Copyright © 2011-2022 走看看