自古無圖無真相！
具體文檔請參考：http://lihongxun945.github.io/jquery-weui/components#navbar
本地實現效果展示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>導航欄測試</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/lib/weui.css">
<link rel="stylesheet" href="../dist/css/jquery-weui.css">
<script src="../dist/lib/jquery-2.1.4.js"></script>
<script src="../dist/js/jquery-weui.js"></script>
<style> .weui_navbar_item.weui_bar_item_on { background-color: #46fff2;
}
</style>
</head>
<body>
<div class="weui_tab">
<div class="weui_navbar">
<a href="#tab1" class="weui_navbar_item weui_bar_item_on"> 選項一 </a>
<a href="#tab2" class="weui_navbar_item"> 選項二 </a>
<a href="#tab3" class="weui_navbar_item"> 選項三 </a>
</div>
<!--<div class="weui_tab_bd"> <p>主體內容放這里</p> </div>-->
<style> .clear{clear: both;} .margin_50{margin-top: 52px;} .pad_6{padding-left: 6px;padding-right: 6px;} .mag_item{width: 100%;height: auto;} .mag_item img{width: 100%;height: auto;border: 0;}
</style>
<div class="clear margin_50"></div>
<div class="weui_tab_bd">
<div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active pad_6">
<div class="mag_item">
<img src="images/coubg.png" >
<p>期待更多的筆記可以和大家分享</p>
</div>
<div class="mag_item">
<img src="images/coubg.png">
<p>希望可以拜讀大家的作品 為榭</p>
</div>
<div class="mag_item">
<img src="images/coubg.png" >
<p>其實只要你不輸給自己 就可以讓自己活得更加充實和快樂</p>
</div>
</div>
<div id="tab2" class="weui_tab_bd_item">
<h2 class="doc-head">希望可以拜讀大家的作品 為榭</h2>
</div>
<div id="tab3" class="weui_tab_bd_item">
<h3 class="doc-head">其實只要你不輸給自己 就可以讓自己活得更加充實和快樂</h3>
</div>
</div>
</div>
<script> $(function() { var i=0; $(".weui_navbar a").bind("click", function(){ //css操作
alert(i++); //操作導航欄
$(".weui_bar_item_on").removeClass('weui_bar_item_on'); //console.log($(this).find("a"));
$(this).addClass("weui_bar_item_on"); //操作內容切換
$(".weui_tab_bd .weui_tab_bd_item_active").removeClass('weui_tab_bd_item_active'); var data_toggle =jQuery(this).attr("href"); $(data_toggle).addClass("weui_tab_bd_item_active"); // $(this).addClass("weui_tab_bd_item_active");
}); }); </script>
</body>
</html>
.weui_navbar 通常作為 .weui_tab 子元素、.weui_tab_bd 的兄弟元素一起使用。結構為：
.weui_tab 作為外層容器，高度撐滿它的父容器的高度，.weui_tab_bd 作為 tab 的主體內容，占據除了.weui_tabbar 以外的全部父容器的高度，.weui_tabbar 則為底部的導航欄。而 .weui_tabbar_item 為.weui_tabbar 的子元素，表示一個導航區，建議不超過 5 個。
另外，需要給當前激活的 .weui_navbar_item 元素添加 .weui_bar_item_on 類，來標示當前高亮的條目。
導航欄自動切換 Tab 和用法和 Tabbar 完全一樣，請參考Tabbar中的文檔。
demo 下載地址：http://download.csdn.net/detail/u012922417/9464690
據說星星比較有用：https://github.com/zxyuns/bluemoon