mui 滑动切换相应内容的js案例

1.首先引入相关css以及js文件

mui.min.css

mui.min.js

zepto.min.js

icons-extra.css

2.html相关代码

• 
  aaa
  

• 
  bbb
  

• 
  ccc
  

• 第1个内容
• 第2个内容
• 第3个内容
• 第4个内容

• 第1个内容
• 第2个内容
• 第3个内容
• 第4个内容

• 第1个内容
• 第2个内容
• 第3个内容
• 第4个内容

3.js代码

$('#slider').on('slide',function(e){
var slider = mui("#slider").slider();
var id = $(slider.currentPage.element).attr("id");
$(".mui-slider-item").removeClass("mui-active");
$(".mui-control-content").removeClass("mui-active");
$("#"+id).addClass("mui-active");
$("#"+id.substring(4)).addClass("mui-active");

});

样式可以效果自己适当调整，切换的效果已经可以，希望能帮助到大家，也为自己留下保存下记录，方便以后直接使用