tab 标签页

    <ul class="tabNav">
        <li class="active">
            <span href="condition">tab1</span>
        </li>
        <li>
            <span href="info">tab2</span>
        </li>
    </ul>
    <div class="tabContent">
        <div class="tab-pane  active" id="condition">
            condition
        </div>
        <div class="tab-pane" id="info">
            info
        </div>
    </div>

 

        ul.tabNav{
            padding:22px 80px 0px ;
            border-bottom: 1px solid #dddddd;
            font-size: 0px;
        }
        ul.tabNav li{
            list-style: none;
            display: inline-block;
            text-align: center;
            font-size: 14px;
            width: 95px;
            box-sizing: border-box;
            background-color: #ebf1fe;
            height: 40px;
            line-height: 16px;
            border-radius: 4px 4px 0 0;
            padding: 12px 17px;
            margin:0px 1px;
            border: 1px solid #dddddd;
            border-bottom: 0;
            cursor:pointer;

        }
        ul.tabNav li span{
            text-decoration: none;
            color: #666666;
            font-weight: bold;
        }

        ul.tabNav li.active{
            background-color: #FFFFFF;
            cursor: default;
        }
        ul.tabNav li.active:after{
            content: " ";
            position: relative;
            display: table;
            width: 93px;
            height: 2px;
            top: 10px;
            background-color: #FFFFFF;
            left: -17px;
        }
        ul.tabNav li.active span{
            color: #19abff;
        }
        .tabContent > .tab-pane{
            display: none;
            transition: opacity 0.15s ease ;
        }
        .tabContent > .tab-pane.active{
            display: block;
        }

 

$(".tabNav li").on("click",function(){
        var id = "";
        if(!$(this).hasClass("active")){
            id = $(this).find("span").attr("href");
            $(".tabContent .tab-pane").removeClass("active");
            $(".tabNav li").removeClass("active");
            $("#"+id).addClass("active");
            $(this).addClass("active");
        }
    });