简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - weui tabbar 到底怎么用啊？tab页面为什么不能切换？
巴扎黑
巴扎黑 2017-04-11 11:06:35
0
2
1026
<body ontouchstart>
        <p class="container js_container">
            <!--底部菜单-->
            <p id="tab" class="weui-tabbar" style="height: 45px;position: fixed;">
                <ul class="weui-navbar">
                    <li class="weui-navbar__item weui-bar__item_on">发现</li>
                    <li class="weui-navbar__item">问医生</li>
                    <li class="weui-navbar__item">我的</li>
                </ul>
                <p class="weui-tab__panel">
                    <p class="weui-tab__content page_feedback">
                        发现
                    </p>
                    <p class="weui-tab__content hide">
                        问医生
                    </p>
                    <p class="weui-tab__content hide">
                        我的
                    </p>
                </p>
            </p>
        </p>
        
        <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
        <script src="js/example.js"></script>
        <script>
            //tab切换    
             $(function(){
      var aLi = $('.weui-navbar__item');
        aLi.on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            var index = $(this).index();
            $('.weui-tab__panel p').eq(index).show().siblings().hide();
        });
    });
        </script>
    </body>

实际情况是ul中的可以切换，但是panel中的内容却不切换？哪里的问题啊？

巴扎黑
巴扎黑

membalas semua(2)
Peter_Zhu
Peter_Zhu2017-04-11 11:08:35 Tingkat 2

  1. 有报错信息吗?

  2. 这个script 是你自己写的吗//tab切换

源码我没看过, 大半年前用过, 当时还是一个纯css ui框架.
不过目测代码上class有hide属性, 所以建议试一下不要控制show hide, addClass removeClass hide 试一下

Suka +0
Tambah Balasan
洪涛
洪涛2017-04-11 11:08:35 Tingkat 1

weui tabbar 切换效果示例代码

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！