电商页有二级tab栏的效果

387 查看
电商网站tab栏很常见，有二级tab栏和或者更多级的tab栏效果的需求也经常遇到，本文用js实现了一个有二级tab栏的效果。
效果如下图
图片描述
html/css部分唯一可以关注的是用伪类选择器实现的三角效果。
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个电商页选择栏效果</title>
    <script src="http://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .select-nav-row{
            padding: 20px 0;
            border-bottom: 1px solid #ddd;
            clear: both;
        }
        .select-nav-row:first-child{
            padding-top: 0px;
        }
        .select-nav-row:last-child{
            border-bottom: none;
        }
        .select-nav-row-left{
            float: left;
            width: 100px;
        }
        .select-nav-row-right{
            overflow: hidden;
        }
        .select-nav-row-title{
            color: #61b13b;
            line-height: 30px;
        }
        .select-navs a{
            text-decoration: none;
            color: #333;
            font-size: 14px;
            display: inline-block;
            line-height: 30px;
            text-align: center;
            padding: 0 14px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 4px;
        }
        .select-navs a:hover,.select-navs a.active{
            background-color: #61b13b;
            color: #fff;
        }
        .select-detail-navs a:hover,.select-detail-navs a.active{
            color:#61b13b;
            background-color: inherit;
        }
        .card-toggle:before {
            position: absolute;
            height: 0;
            content: "";
            display: block;
            top: 0px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 12px #ddd solid;
            border-top: 0;
        }
        .card-toggle:after {
            position: absolute;
            height: 0;
            content: "";
            display: block;
            top: 2px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 12px #fff solid;
            border-top: 0;
        }
        .card-toggle{
            position: absolute;
            top: -12px;
            width: 8px;
            height: 12px;
            cursor: pointer;
            font-weight: bold;
            font-size: 18px;
            color: #fff;
        }
        .select-detail-wrap{
            position: relative;
            padding-left: 100px;
            padding-top: 14px;
            border-top: 1px solid #ddd;
            margin-top: 14px;
            display: none;
        }
    </style>
    <script type="text/javascript"> 
        $(function(){
            // 职业方向课程的配置
            // courseDetail中的bigDate等键与html中的data-detail属性值耦合
            // name : "Hadoop",为二级tab栏中的文本
            // isAll: false，为是否显示在全部二级tab栏，false为不显示
            var courseDetail = {
                bigDate : [
                    {
                        name : "Hadoop",
                        isAll: false
                    },
                    {
                        name : "Storm",
                        isAll: true
                    }
                ],
                webQianduan:[
                    {
                        name : "nodeJS",
                        isAll: true
                    },
                    {
                        name : "jQuery",
                        isAll: true
                    },
                    {
                        name : "AngularJS",
                        isAll: true
                    }
                ],
                webDevelopment:[
                    {
                        name : "PHP",
                        isAll: true
                    },
                    {
                        name : "MongoDB",
                        isAll: true
                    }
                ],
                workSkill:[
                    {
                        name : "Office",
                        isAll: true
                    },
                    {
                        name : "求职面试",
                        isAll: true
                    }
                ]
            }
            var state = {
                career : ""
            }

            // 事件
            $(".select-nav-row-right,.select-detail-wrap").on("click","a",function(){
                // 点击的是职业方向的按钮
                if ($(this).attr("data-detail")) {
                    var detail = $(this).attr("data-detail");
                    var html = "";
                    var left;
                    if (state["career"] == detail) {return}

                    // courseDetail中的isAll决定是否展示在all中
                    if (detail=="all") {
                        $.each(courseDetail,function(idx,value){
                            $.each(value,function(idx2,value2){
                                if (value2["isAll"]) {
                                    html += '<a>' + value2["name"] + '</a>'
                                }
                            })
                        })
                    }else{
                        $.each(courseDetail[detail],function(idx, value){
                            html += '<a>' + value["name"] + '</a>'
                        })
                    }

                    state["state"] = detail;
                    left = $(this).offset().left - $(this).parent().offset().left +
                            $(".select-nav-row-left").width() + $(this).width()/2 + 20
                    cardLeft(left)
                    $(".select-detail-navs").empty().append(html);
                    $(".select-detail-wrap").show();
                }
                // 样式的变化
                $(this).addClass("active").siblings().removeClass("active")
            })

            // 方法
            function cardLeft(left){
                $('.card-toggle').css("left",left+"px")
            }
        })
    </script>
</head>
<body>
    <div class="select-nav-wrap">
        <div class="select-nav-row">
            <div class="select-nav-row-left select-nav-row-title">
                职业方向
            </div>
            <div class="select-nav-row-right">
                <div class="select-navs">
                    <a data-detail="all">全部</a>
                    <a data-detail="bigDate">大数据</a>
                    <a data-detail="webQianduan">前端</a>
                    <a data-detail="webDevelopment">后端</a>
                    <a data-detail="workSkill">职场技能</a>
                </div>
            </div>
            <div class="select-navs select-detail-wrap">
                <div class="card-toggle"></div>
                <div class="select-detail-navs">

                </div>
            </div>
        </div>

        <div class="select-nav-row">
            <div class="select-nav-row-left select-nav-row-title">
                价格
            </div>
            <div class="select-nav-row-right">
                <div class="select-navs">
                    <a>全部</a>
                    <a>免费</a>
                    <a>100元以下</a>
                    <a>100元以上</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>