mui 底部选项卡-div模式 实现跳转页面

可以通过给每个选项卡绑定点击事件，在点击事件中使用JavaScript实现页面的跳转。具体代码如下：

HTML代码：

<div class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" id="homeTab">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" id="messageTab">
        <span class="mui-icon mui-icon-chatboxes"></span>
        <span class="mui-tab-label">消息</span>
    </a>
    <a class="mui-tab-item" id="settingTab">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</div>

JavaScript代码：

// 获取选项卡元素
var homeTab = document.getElementById("homeTab");
var messageTab = document.getElementById("messageTab");
var settingTab = document.getElementById("settingTab");

// 绑定点击事件
homeTab.addEventListener("tap", function() {
    // 跳转到首页页面
    mui.openWindow({
        url: "home.html",
        id: "home"
    });
});

messageTab.addEventListener("tap", function() {
    // 跳转到消息页面
    mui.openWindow({
        url: "message.html",
        id: "message"
    });
});

settingTab.addEventListener("tap", function() {
    // 跳转到设置页面
    mui.openWindow({
        url: "setting.html",
        id: "setting"
    });
});

以上代码实现了底部选项卡的点击事件，当用户点击不同的选项卡时，会跳转到相应的页面。