weui tabbar 切换

weui tabbar 切换

weui tabbar 切换

Html:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <!--医首信息自定义css--> <link rel="stylesheet" type="text/css" href="../css/jiaj.css" /> <!--官网demo css--> <link rel="stylesheet" type="text/css" href="../css/example.css" /> <!--weui css--> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" /> <!--jQuery weui--> <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> <!--页面切换必须要添加js_container--> <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> <!--菜单对应panel--> <div class="weui_tab_bd"> <!--tab1 医生管理面板--> <div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active"> 问医生内容....... </div> <!--tab2 我的面板--> <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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzpyxz.html