weui navbar实现

<link rel="stylesheet" href="../weui.min.css">//weui GitHub可以下载
<div class="page">
    <div class="page__bd" style="height: 100%">
        <div class="weui-tab" style="display: block">
            <div class="weui-navbar">
                <div href="#tab1" class="weui-navbar__item weui-bar__item_on">
                    选项一
                </div>
                <div href="#tab2" class="weui-navbar__item">
                    选项二
                </div>
                <div href="#tab3" class="weui-navbar__item">
                    选项三
                </div>
            </div>
            <div class="weui-tab__panel" >
                <div id="tab1" class="weui-tab__content" style="display: block">选项一的内容</div>
                <div id="tab2" class="weui-tab__content" >选项二的内容</div>
                <div id="tab3" class="weui-tab__content" >选项三的内容</div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(function(){
    $('.weui-navbar__item').on('click', function () {
        $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        $(jQuery(this).attr("href")).show().siblings('.weui-tab__content').hide();
    });

});
</script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>