mui 框架：a标签无法跳转 - 解决篇

解决问题 · 罗列与参考：

1. mui框架导致a标签失效无法点击？
2. mui框架之a标签无法跳转的问题？
3. 关于mui中ul列表需要点击多次生效的问题？
4. mui框架：如何自定义实现a标签点击事件的办法？

---

---

bug截图说明 · 不是想要的效果：

当前页面切换tabs不生效！（如何解决？）

• 参考下面文章部分 ，【代码2：】–>【 2. 代码块B】–> 【阻止mui框架 的 li 默认点击事件】

---

---

代码1：

<nav class="mui-bar mui-bar-tab h40" id="footer">
	<ul class="mui-table-view mui-grid-view tabclick_ul" id="footerclick_ul">
       <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 mui-active">
        	<a href="{siteurl($siteid)}/">首页a>
        li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        	<a href="">在线咨询a>
        li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        	<a href="">电话联系a>
        li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 stop">
        	{if $catid==11} 
        	<a data-val="2" data-href="{$CATEGORYS[11][url]}?#school_lxwm">来校路线a>
        	{else} 
        	<a href="{$CATEGORYS[11][url]}?#school_lxwm">来校路线a>
        	{/if}
        li>
	ul>
nav>
	

仅作为参考对比使用（代码不成熟）

---

---

代码参考2：【成熟代码】

1. 代码块A

<nav class="mui-bar mui-bar-tab h40" id="footer">
	<ul class="mui-table-view mui-grid-view tabclick_ul" id="footerclick_ul">
       <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 mui-active">
        	<a href="{siteurl($siteid)}/">首页a>
        li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        	<a href="">在线咨询a>
        li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        	<a href="">电话联系a>
        li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 stop">
        	{if $catid==11} 
        	<a data-val="2" data-href="{$CATEGORYS[11][url]}?#school_lxwm">来校路线a>
        	{else} 
        	<a href="{$CATEGORYS[11][url]}?#school_lxwm">来校路线a>
        	{/if}
        li>
	ul>
nav>

2. 代码块B

{template "content_m","footer_whzz_js"}		
<script src="{JS_PATH}js_whzz/jquery.min.js">script>

<script type="text/javascript">
	/* 阻止mui框架 的 li 默认点击事件
	 * 注意本案例绑定事件：已将侧滑导航和底部导航id#tabclick_ul和id#footerclick_ul统一为class.tabclick_ul
	 * */
	mui(".tabclick_ul>.stop").on('tap', 'a', function (event) {
		this.click();
		event.stopPropagation();//阻止li事件的点击
		// 获取路径
		var _thisHref = this.getAttribute('data-href');
		console.log(_thisHref);
		var _thisVal = this.getAttribute('data-val');
		console.log(_thisVal);
		//判断页面点击来源
		var navli = $(".navli");
		var tabPane = $(".tab-pane");
		//学校简介#school_xxjj
		if(_thisVal == 0 || _thisVal ==1){
			$(".navli").removeClass('mui-active');
			$(".tab-pane").removeClass('mui-active');
			$(navli[_thisVal]).addClass('mui-active');
			$(tabPane[_thisVal]).addClass('mui-active');
			offCanvasWrapper.offCanvas('close');
		} 				
		//来校路线#school_lxwm
		if (_thisVal ==2){
			$(".navli").removeClass('mui-active');
			$(".tab-pane").removeClass('mui-active');
			$(navli[1]).addClass('mui-active');
			$(tabPane[1]).addClass('mui-active');
		}
	});
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("#school_");  
		str = str.substring(index+1, strlen);
		console.log(str);
		var navli = $(".navli");
		var tabPane = $(".tab-pane");
		//学校简介#school_xxjj
		if(str ==='school_xxjj'){
			$(".navli").removeClass('mui-active');
			$(".tab-pane").removeClass('mui-active');
			$(navli[0]).addClass('mui-active');
			$(tabPane[0]).addClass('mui-active');
		}
		//来校路线#school_lxwm
		if (str ==='school_lxwm'){
			$(".navli").removeClass('mui-active');
			$(".tab-pane").removeClass('mui-active');
			$(navli[1]).addClass('mui-active');
			$(tabPane[1]).addClass('mui-active');
		}		
   	});
script>

---

---

参考阅读：

1. https://www.cnblogs.com/mengfei001/p/6811475.html
2. https://blog.csdn.net/wugezi/article/details/88368794

---

---