html5 导航栏切换效果_html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学堂授课</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <link rel="stylesheet" href="../../../res/css/common/weui.min.css">
    <link rel="stylesheet" href="../../../res/css/common/jquery-weui.min.css">
    <link rel="stylesheet" href="../../../res/css/common/style.css">
    <link rel="stylesheet" href="../../../res/css/common/hm.css">
    <link rel="stylesheet" href="main.css">
</head>

<body>

<header class="tl-header">
    <div class="header">
        <h1>我的素材</h1>
        <a href="#" class="tl-return" onclick="back();">
            <img src="../../../res/image/back.png" class="tl-img-left"/>
        </a>
    </div>
    <ul class="tabs" style="background: #F8F8F8;overflow: hidden">
        <li class="col-3" data-toggle="unread" ><span class="current tl-999">全部</span></li>
        <li class="col-3" data-toggle="read" ><span class="tl-999">待审核</span></li>
        <li class="col-3" data-toggle="read" ><span class="tl-999">已通过</span></li>
        <li class="col-3" data-toggle="read" ><span class="tl-999">未通过</span></li>
    </ul>
</header>

<div style="padding: 16% 6% 4% 6%;background: #fff;">


</div>



<script src="../../../res/js/jquery-2.1.4.js"></script>
<script src="../../../res/js/jquery-weui.js"></script>
<script src="../../../res/js/common.js"></script>
<!--<script src="articleList.js"></script>-->
<script>

    $(function() {
        // 切换卡(消息、我的订单)
        jQuery(".tabs li").bind("click", function() {
            jQuery(".tabs .current").removeClass('current');
            jQuery(".swiper-container .db").removeClass("db").addClass("dn");
            jQuery(this).find("span").addClass("current");
            var data_toggle = jQuery(this).attr("data-toggle");
            jQuery("#" + data_toggle).addClass("db");
        });
    })
</script>

</body>
</html>

核心css

ul,li{list-style: none;}
.tl-header .current{color:#008EE5;border-bottom: 3px solid #008EE5;height:50px;line-height: 50px;display: inline-block;padding:0 10px;}
.tl-header li .col-4 span{font-size: 875rem}
.col-3 {width:25%;position: relative;
    min-height: 1px;float:left;text-align: center;}