<!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;}


												


											
html5 导航栏切换效果的更多相关文章
	

    
								
  1. Flutter实战视频-移动电商-04.底部导航栏切换效果
		
    04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart  ...
    
		
    2. 
						
  2. MUI底部导航栏切换效果
		
    首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...
    
		
    3. 
						
  3. mui底部导航栏切换分页
		
    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
    
		
    4. 
						
  4. Flutter - BottomNavigationBar底部导航栏切换后，状态丢失
		
    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
    
		
    5. 
						
  5. 通过html和css做出下拉导航栏的效果
		
    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...
    
		
    6. 
						
  6. 极致精简的fragment实现导航栏切换demo
		
    一个小demo.用button+fragment实现导航栏切换界面,适合刚接触的新手看一下. 效果图 点击第二个后 源码: 主界面 <span style="font-size:18p ...
    
		
    7. 
						
  7. jquery 实现导航栏滑动效果
		
    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...
    
		
    8. 
						
  8. 【前端】javascript实现导航栏筋斗云效果特效
		
    实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...
    
		
    9. 
						
  9. Flutter - TabBar导航栏切换后，状态丢失
		
    上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. elasticsearch7.x集群安装（含head、bigdesk、kibana插件）
			
    网址:https://www.elastic.co 192.168.14.239 es-node1192.168.14.240 es-node2192.168.14.241 es-node3 ==== ...
    
			
    2. 
						
  2. 转发大神nginx配置详解
			
    序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也 ...
    
			
    3. 
						
  3. 洛谷 P1199 三国游戏 题解
			
    每日一题 day18 打卡 Analysis 贪心 假如小A先选最大的[5,4],虽然电脑必须选一个破坏, 我们可以理解为5和4都属于小A的,假如后面未被破坏的最大值无论是和5相关还是和4相关,必然还 ...
    
			
    4. 
						
  4. 替罪羊树 ------ luogu P3369 【模板】普通平衡树（Treap/SBT）
			
    二次联通门 : luogu P3369 [模板]普通平衡树(Treap/SBT) 闲的没事,把各种平衡树都写写 比较比较... 下面是替罪羊树 #include <cstdio> #inc ...
    
			
    5. 
						
  5. Day14:CSS垂直居中
			
    verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...
    
			
    6. 
						
  6. P1041 传染病控制——暴力遍历所有相同深度的节点
			
    P1041 传染病控制 说实话这种暴力我还是头一次见,每次病毒都会往下传染一层: 数据范围小,我们可以直接枚举当前层保护谁就好了: 用vector 记录相同层数的节点:维护已经断了的点: 如果超出最底 ...
    
			
    7. 
						
  7. 如何查询数据库中所有表格，或者查询是否存在某个表格-mysql和oracle
			
    这个问题,在之前就有写过,但是想找到语句还是记不得,这里主要提及我自己有用到的数据库mysql和oracle 1.mysql 这个是自己安装的,所有配置都是默认配置没有改变,所以保存表名的表还是inf ...
    
			
    8. 
						
  8. 浅析python-socket编程
			
    1. 什么是socket? socket是套接字的英文名称, 我们知道在TCP/IP协议簇体系中,将网络状态分为了应用层.传输层.网络层.物理层等四种状态,而socket是与传输层密切相关的,其主要实 ...
    
			
    9. 
						
  9. 优化Unity游戏项目的脚本（下）
			
    金秋9月,我们祝所有的老师们:教师节快乐 ! 今天,我们继续分享来自捷克的开发工程师Ondřej Kofroň,分享C#脚本的一系列优化方法. 在优化Unity游戏项目的脚本(上)中,我们介绍了如何查 ...
    
			
    10. 
						
  10. Linux内存中的Cache真的能被回收吗？ 【转】
			
    在Linux系统中,我们经常用free命令来查看系统内存的使用状态.在一个RHEL6的系统上,free命令的显示内容大概是这样一个状态: [root@tencent64 ~]# free        ...
    
			
    11.