mui选项卡div模式完整源码
本帖最后由 fengrui99 于 2018-5-25 17:23 编辑原文来自：https://www.frbkw.com/845/
mui侧滑菜单栏DIV模式完整源码_点击UL切换DIV
在hbuilder官网mui文档中只有给出模版，没有点击切换的效果。
于是请教了后端大佬才知道是没有绑定mui的自定义事件但是绑定后是成功跳转了，
但是效果不好后端大佬最后用mui的tap事件解决mui侧滑菜单栏DIV模式完整源码_点击UL切换DIV
https://frbkw.com/wp-center/uploads/2018/05/WX20180522-201930.png
点击对应的ul会跳到相对应的div，DIV模式有好处也有坏处，不会后端的枫瑞来说，
前段先做好一步一步来
没有头发变白怎么好意思学后端
回归话题
首先在侧滑菜单中添加一个id：
<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
<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代码
document.getElementById('lx1').addEventListener('tap', function(){
divset = document.getElementsByClassName("hezi")
for (var i = 0; i<divset.length;i++) {
divset.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.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.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.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.style.display="none";
};
document.getElementById("div5").style.display="";
})
以上就是整体步骤
源码打包下载：https://pan.baidu.com/s/1ozmzWqIt4hFoVOKCJ0o-2Q
源码整体打包,下载开发工具,文件-打开目录-源码目录（下载源码解压到桌面选择到这个目录就好）
页:
[1]