mui顶部选项卡问题。并没能达到效果,请大神指教

<!doctype html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
</head>

<body>

    <div class="mui-content">
        <div id="slider" class="mui-slider mui-fullscreen">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a class="mui-control-item mui-active" href="#item1mobile" data-wid="movie_home.html">推荐</a>
                    <a class="mui-control-item" href="#item2mobile" data-wid="TV_play.html">电视剧</a>
                    <a class="mui-control-item" href="#item3mobile" data-wid="top_movie.html">电影</a>
                    <a class="mui-control-item" href="#item4mobile" data-wid="top_variety.html">综艺</a>
                    <a class="mui-control-item" href="#item5mobile" data-wid="top_entertainment.html">娱乐</a>
                </div>
            </div>
        </div>
    </div>

    <script src="js/mui.min.js"></script>
    <script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>

    <script>
        mui.init();

        mui.plusReady(function() {
            var group = new webviewGroup("top_tab.html", {
                items: [{
                    id: "movie_home.html", //这是子页1的路径
                    url: "movie_home.html",
                    extras: {}
                }, {
                    id: "TV_play.html", //这是子页2的路径
                    url: "TV_play.html",
                    extras: {}
                }, {
                    id: "top_movie.html", //这是子页2的路径
                    url: "top_movie.html",
                    extras: {}
                }, {
                    id: "top_variety.html", //这是子页2的路径
                    url: "top_variety.html",
                    extras: {}
                }, {
                    id: "top_entertainment.html", //这是子页2的路径
                    url: "top_entertainment.html",
                    extras: {}
                }],
                onChange: function(obj) {
                    var c = document.querySelector(".mui-control-item.mui-active");
                    if(c) {
                        c.classList.remove("mui-active");
                    }
                    document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
                }
            });
            mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
                var wid = this.getAttribute("data-wid");
                group.switchTab(wid);
            });

        });
        mui.back = function() {
            var _self = plus.webview.currentWebview();
            _self.close("auto");
        }
    </script>
</body>


图片说明

1个回答

是要个什么效果啊,没懂ε=(´ο`*)))唉

AYWQHHD
AYWQHHD 想要的效果是,滑动的选项卡,可以跳转到页面上,就像腾讯视频那种,滑动或者点击可以到指定页面,但是现在页面全部写好了。但是顶部选项卡的样式,功能都没有出来,滑动不了,点击也不能跳转到指定页面。
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!