博客

解决问题 · 罗列与参考：

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

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

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

• 参考下面文章部分 ，【代码2：】–>【 2.
  
代码块B

  】–> 【阻止mui框架 的 li 默认点击事件】

代码1：

<!--footer固定底部-->
<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>
	<!--<script type="text/javascript">
		//视图更新
		function fresh(n){
			alert(n);
			return n;
		}
	</script>-->

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

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

1.

代码块A


<!--footer固定底部-->
<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