mui选项卡div模式完整源码

fengrui99

原文来自：https://www.frbkw.com/845/
mui侧滑菜单栏DIV模式完整源码_点击UL切换DIV
在hbuilder官网mui文档中只有给出模版，没有点击切换的效果。
于是请教了后端大佬才知道是没有绑定mui的自定义事件但是绑定后是成功跳转了，


但是效果不好后端大佬最后用mui的tap事件解决mui侧滑菜单栏DIV模式完整源码_点击UL切换DIV

点击对应的ul会跳到相对应的div，DIV模式有好处也有坏处，不会后端的枫瑞来说，
前段先做好一步一步来
没有头发变白怎么好意思学后端
回归话题
首先在侧滑菜单中添加一个id：

[HTML] 纯文本查看 复制代码

<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
     <li class="mui-table-view-cell" >
	  <a class="mui-navigate-right" id="lx1">首页</a>
	</li>
	<li class="mui-table-view-cell" id="lx2">
	   <a class="mui-navigate-right" >类型1</a>
	</li>
	<li class="mui-table-view-cell" id="lx3">
		<a class="mui-navigate-right">类型2</a>
	</li>
	<li class="mui-table-view-cell" id="lx4">
		<a class="mui-navigate-right">类型3</a>
	</li>
	<li class="mui-table-view-cell" id="lx5">
	    <a class="mui-navigate-right">类型4</a>
	</li>
</ul>
</div>

插入后给对应的Div也加上id，设置样式display：none

[HTML] 纯文本查看 复制代码

<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
	<div id="div1" class="hezi">1111</div>
	<div id="div2" class="hezi" style="display: none;">2222</div>
	<div id="div3" class="hezi" style="display: none;">3333</div>
	<div id="div4" class="hezi" style="display: none;">4444</div>
	<div id="div5" class="hezi" style="display: none;">5555</div>
</div>

最后就是js代码了,点击后显示但前的div隐藏其他的比较傻瓜式的js代码

[JavaScript] 纯文本查看 复制代码

document.getElementById('lx1').addEventListener('tap', function(){
	divset = document.getElementsByClassName("hezi")
	for (var i = 0; i<divset.length;i++) {
		divset[i].style.display="none";
	};
document.getElementById("div1").style.display="";
})
				
document.getElementById('lx2').addEventListener('tap', function(){
					
	divset = document.getElementsByClassName("hezi")
	for (var i = 0; i<divset.length;i++) {
		divset[i].style.display="none";
	};
	document.getElementById("div2").style.display="";					
	})
	document.getElementById('lx3').addEventListener('tap', function(){
					
	divset = document.getElementsByClassName("hezi")
	for (var i = 0; i<divset.length;i++) {
		divset[i].style.display="none";
	};
	document.getElementById("div3").style.display="";					
	})
	document.getElementById('lx4').addEventListener('tap', function(){
					
	divset = document.getElementsByClassName("hezi")
	for (var i = 0; i<divset.length;i++) {
		 divset[i].style.display="none";
	};
	document.getElementById("div4").style.display="";					
	})
	document.getElementById('lx5').addEventListener('tap', function(){
					
	divset = document.getElementsByClassName("hezi")
		for (var i = 0; i<divset.length;i++) {
			divset[i].style.display="none";
		};
	document.getElementById("div5").style.display="";					
		})

以上就是整体步骤
源码打包下载：https://pan.baidu.com/s/1ozmzWqIt4hFoVOKCJ0o-2Q
源码整体打包,下载开发工具,文件-打开目录-源码目录（下载源码解压到桌面选择到这个目录就好）