Html:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
<link rel="stylesheet" type="text/css" href="../css/jiaj.css" />
<link rel="stylesheet" type="text/css" href="../css/example.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
<style type="text/css">
.weui_navbar_item.weui_bar_item_on {
color: #2196F3;
cursor: pointer;
}
style>
<title>患者我的title>
head>
<body ontouchstart>
<div class="container js_container">
<div class="page">
<div class="weui_tab">
<div class="weui-tabbar">
<a href="#tab1" class="weui_navbar_item weui_bar_item_on">
问医生
a>
<a href="#tab2" class="weui_navbar_item">
我的
a>
div>
<div class="weui_tab_bd">
<div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active">
问医生内容.......
div>
<div id="tab2" class="weui_tab_bd_item">
我的........
div>
div>
div>
div>
div>
<script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js">script>
<script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js">script>
body>
html>
jiaj.css
/*tab 切换*/ .weui_navbar_item{ position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 6px; text-align: center; font-size: 15px; /* align-items: center; */ line-height: 35px; -webkit-tap-highlight-color: rgba(0,0,0,0); } .weui_navbar_item::after{ content: ""; position: absolute; right: 0; top: 0; width: 1px; bottom: 0; border-right: 1px solid #CCCCCC; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scaleX(.5); transform: scaleX(.5); } .weui_navbar_item .weui_bar_item_on { color: #2196F3; transition: all 0.5s ease-in; }
example.css
.container, .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .global_navs .cell:before, .global_navs:after, .global_navs:before { border-color: #D9DBDA } body, html { height: 100%; -webkit-tap-highlight-color: transparent } .page, body { background-color: #FBF9FE } .container { overflow: hidden } .page { overflow-y: auto; -webkit-overflow-scrolling: touch } .hd { padding: 2em 0 } .page_desc { text-align: center; color: #888; font-size: 14px } .bd.spacing { padding: 0 15px } .page_title { text-align: center; font-size: 34px; color: #3CC51F; font-weight: 400; margin: 0 15% } .page.button .page_title, .page.cell .page_title { color: #225FBA } .global_navs { background-color: transparent } .page.article, .page.dialog, .page.icons, .page.msg, .page.toast { background-color: #FFF } .global_navs .cell { padding-top: .5em; padding-bottom: .5em } .global_navs .icon_nav { width: 28px; height: 28px; display: block; margin-right: .7em } .page.button .bd { padding: 0 15px } .page.button .button_sp_area { padding: 10px 0; width: 60%; margin: 0 auto; text-align: justify; text-justify: distribute-all-lines; font-size: 0 } .page.button .button_sp_area:after { display: inline-block; width: 100%; height: 0; font-size: 0; margin: 0; padding: 0; overflow: hidden; content: "." } .page.cell .bd { padding-bottom: 30px } .page.dialog .bd, .page.toast .bd { padding: 120px 15px 0 } .page.msg .weui_msg { padding-top: 30px } .page.article .page_title { color: #DE7C23 } .page.icons { text-align: center } .page.icons .page_title { color: #3E24BD } .page.icons .bd { padding: 30px 0; text-align: center } .page.icons .icon_sp_area { padding: 10px 20px; text-align: left } .page.icons i { margin: 0 5px 10px } @-webkit-keyframes slideIn { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes slideIn { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-webkit-keyframes slideOut { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes slideOut { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .page.slideIn { -webkit-animation: slideIn .2s forwards; animation: slideIn .2s forwards } .page.slideOut { -webkit-animation: slideOut .2s forwards; animation: slideOut .2s forwards }
OK!tabbar 实例完成！直接拿走！