微信开发之导航栏切换效果
自古无图无真相！
具体文档请参考：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
