js dynamically created tab and set the style.

RT

style

<style type="text/css">
            .content .miniNav{
                    position: relative;
                    width: 100%;
                    height: auto;
                    border-bottom: 1px solid #e5e5e5;
                    background: transparent;
                    z-index: 10;
            }
            .box{
                margin-top: 18px;
                margin-bottom: 18px;
            }
            .box a{
                cursor: pointer;
                display: inline-block;
                color: #333;
                text-decoration: none;
            }
            .ziliao,.ziliaoList,.fiveLine{
                font-size: 14px;
            }
            .box .item {
                padding: 5px 6px;
                margin: 5px 22px;
                line-height: 22px;
                display: inline-block;
                color: #333;
                text-decoration: none;
            }
            .box .item--active {
                padding: 5px 6px;
                border-radius: 2px;
                margin: 5px 22px;
                color: #fff !important;
                background: #fc2328;
                box-shadow: 2px 2px 5px rgba(0, 0, 0, .05);
            }
            .box .des{
                color: #aaa;
                font-weight: 600;
            }
        </style>

html

<div class="miniNav">
            <!-- 筛选 -->
            <div class="box">
                <div class="ziliao">
                    <span class="des">全部资料</span>
                </div>
                <div class="ziliaoList">
                    <span class="des fenlei">资料分类</span>
                </div>
                <div class="fiveLine"></div>
            </div>
        </div>

js

<script type="text/javascript">
            //获取地址栏url
            var URL = location.href 
            //jq ajax 请求
            $.ajax({
                url: 'http://www.xiaoma.com/channel_ajax.php?'+URL,
                type: 'post',
                data: {},
                dataType: 'json'
            }).then(function(res) {
                console.log(res,444);
                //把从json获取的数据赋值给空数组
                var str = ''
                var str2 = ''
                var str3 = ''
                var defaultThirdId = res.defaultThirdId
                var defaultFourId = res.defaultFourId
                var defaultFiveId = res.defaultFiveId
                //先判断该层是否有数据
                if(res.thirdData.length!=0){
                $.each(res.thirdData,function(index,element){
                     if (element.id==defaultThirdId) {
                         str +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
                     } else{
                         str +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
                     }
                })
                }
                //先判断该层是否有数据
                if(res.fourData.length!=0){
                $.each(res.fourData,function(index,element){
                    if (element.id==defaultFourId) {
                         str2 +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
                    } else{
                         str2 +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
                    }
                })
                }
                if(res.fiveData.length!=0){
                $.each(res.fiveData,function(index,element){
                        if (element.id==defaultFiveId) {
                             str3 +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
                        } else{
                             str3 +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
                        }
                })
                }
                //遍历完成之后挂上去
                $('.ziliao').append(str)
                $('.ziliaoList').append(str2)
                $('.fiveLine').append(str3)
            }).fail(function() {
                console.log('获取数据失败');
            })
        </script>