weui-navbar 导航栏页面切换

最新推荐文章于 2025-11-16 00:02:54 发布

原创最新推荐文章于 2025-11-16 00:02:54 发布 · 1.6w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#weui-navbar #weui #weui-navbar__item

前端知识点专栏收录该内容

10 篇文章

订阅专栏

博客介绍了WeUI导航栏的效果，包含HTML、CSS和JS代码相关内容，聚焦于信息技术领域中前端开发的WeUI导航栏实现。

效果

这里写图片描述

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");
        });
    });