weui-navbar 导航栏页面切换

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yechaoa/article/details/82257906

效果

html

<div class="weui-tab">
   <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item_on" href="#tab1">
            标签一
        </a>
        <a class="weui-navbar__item" href="#tab2">
            标签二
        </a>
        <a class="weui-navbar__item" href="#tab3">
            标签三
        </a>
    </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");
        });
    });