mui框架mui-active高亮当前栏目 - 代码说明

---

mui框架mui-active高亮当前栏目 - 代码说明

---

使用mui框架开发，有没有遇到这种问题：

• 首先，网站的公共导航中，有几个栏目在另一个页面中是tabs选项卡的不同选项，
• 那么，如何通过点击导航中指定的栏目，并在进入下一个tabs页面之后，自动.mui-active当前栏目呢？

---

项目案例 · 截图示下：

上图中，点击“行业资讯” 进入下图所示页面，并高亮所选的栏目：

下面，一起看一下，我是如何通过代码实现的。

---

公共导航的代码：

1. html代码：

<!-- 页面一（公共头部）：div下拉导航组件的代码 -->
<li class="navlink-btns">
	<a href="m_kaoshijiayouzhan.html?#m_bkzn">报考指南</a>
	<a href="m_kaoshijiayouzhan.html?#m_hyzx">行业资讯</a>
</li>

<!-- 页面二：添加和js操作匹配的class类名，即 .navli 和 .tab-pane -->
<!-- 代码参考下图 -->

2. js代码：

<!--
mui.min.js
逻辑专属
-->
<script src="http://localhost/statics/js/jquery.min.js"></script>
<script type="text/javascript"> 
	$(function(){
		//截取锚点定位
		var thisUrl = window.location.href;
		var str = thisUrl;
		var strlen = str.length;
		console.log(strlen);
		// 出现的位置
		var index = str.indexOf("#m_");  
		str = str.substring(index+1, strlen);
		console.log(str);
		var navli = $(".navli");
		var tabPane = $(".tab-pane");
		//报考指南#m_bkzn
		if(str ==='m_bkzn'){
			$(".navli").removeClass('mui-active');
			$(".tab-pane").removeClass('mui-active');
			$(navli[0]).addClass('mui-active');
			$(tabPane[0]).addClass('mui-active');
		}
		//行业资讯#m_hyzx
		if (str ==='m_hyzx'){
			$(".navli").removeClass('mui-active');
			$(".tab-pane").removeClass('mui-active');
			$(navli[1]).addClass('mui-active');
			$(tabPane[1]).addClass('mui-active');
		}
   	});
</script>

---

以上就是关于“ mui框架mui-active高亮当前栏目 - 代码说明 ” 的全部内容。