跳转到另一页面指定选项卡块 mui

最新推荐文章于 2021-08-24 11:55:50 发布

美欣

最新推荐文章于 2021-08-24 11:55:50 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/monkey_sister/article/details/86575367

js 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了使用MUI框架实现的移动应用底部Tab导航栏的HTML结构与JS交互逻辑，包括如何通过URL参数初始化页面并跳转至指定的Tab内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<nav class="mui-bar mui-bar-tab my_nav">
     <a class="mui-tab-item mui-active" href="#tabbar-with-acknowledge">
	        <span class="mui-icon iconfont icon-zhishijiedu"></span>
	        <span class="mui-tab-label">知识百科</span>
     </a>
     <a class="mui-tab-item" href="#tabbar-with-camera">
	        <span class="mui-icon iconfont icon-camera"></span>
	        <span class="mui-tab-label">拍照识别</span>
     </a>
     <a class="mui-tab-item" href="#tabbar-with-product">
	        <span class="mui-icon iconfont icon-shangdian"></span>
	        <span class="mui-tab-label">商店</span>
     </a>
     <a class="mui-tab-item" href="#tabbar-with-account">
	        <span class="mui-icon iconfont icon-accountcopy"></span>
	        <span class="mui-tab-label">账号</span>
     </a>
</nav>
	
<div class="mui-content my_content" >
     <div id="tabbar-with-acknowledge" class="mui-control-content mui-active div1">
     <div id="tabbar-with-camera" class="mui-control-content mui-active div1">
</div>

上面代码为要跳转到的目标页面---b.html

b.html 的js内容，如下

var page_url;
    //初始化URL参数
    InitUrlParms = function () {
        var args = new Object();
        var query = location.search.substring(1);//获取查询串   
        var pairs = query.split("&");//在逗号处断开   
        for (var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf('=');//查找name=value   
            if (pos == -1) continue;//如果没有找到就跳过   
            var argname = pairs[i].substring(0, pos);//提取name   
            var value = pairs[i].substring(pos + 1);//提取value   
            args[argname] = decodeURIComponent(value);//存为属性   
        }
        page_url = args;
    };//封装好的函数，获取从a.html传来的参数type
 
    InitUrlParms();
	//底部链接跳转到指定tab块
        
    if (page_url["type"] != null) {
        var tabIndex = page_url["type"];
    } else {
        var tabIndex = 0;
    }
    if(tabIndex > 0) {
    	//显示指定的tab内容
	    $('.mui-control-content').eq(tabIndex).addClass('mui-active').siblings().removeClass('mui-active');
	    
	    //tab选项卡高亮
	    $('.mui-tab-item').eq(tabIndex).addClass('mui-active').siblings().removeClass('mui-active');
	    
    }

a.html页面代码

<a href="../index.html?type=1" class= "mui-icon mui-icon-left-nav" ></a>