html5 导航栏切换效果
<!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;}
