weui-navbar 导航栏页面切换

效果

html

<div class="weui-tab">
   <div class="weui-navbar">
        class="weui-navbar__item weui-bar__item_on" href="#tab1">
            标签一
        
        class="weui-navbar__item" href="#tab2">
            标签二
        
        class="weui-navbar__item" href="#tab3">
            标签三
        
    div>
    <div class="weui-tab__panel">
        <div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active">
            内容一
        div>
        <div id="tab2" class="weui_tab_bd_item">
            内容二
        div>
        <div id="tab3" class="weui_tab_bd_item">
            内容三
        div>
    div>
div>

css

.weui-navbar a{text-decoration: none;color: #333;}

.weui_tab_bd_item{display:none;height: 100%;overflow: auto;}
.weui_tab_bd_item.weui_tab_bd_item_active{display:block;}

js

    $(function(){
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');

            //内容切换
            $(".weui-tab__panel .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");
        });
    });