mui滑动导航选择

html部分

	<div class="mui-slider">
		<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<div class="mui-scroll">
				<a class="mui-control-item mui-active" href="#item1">
					推荐
				</a>
				<a class="mui-control-item" href="#item2">
					热点
				</a>
				<a class="mui-control-item" href="#item3">
					北京
				</a>
				<a class="mui-control-item" href="#item4">
					北京
				</a>
				<a class="mui-control-item" href="#item5">
					北京
				</a>
				<a class="mui-control-item" href="#item6">
					北京
				</a>
				<a class="mui-control-item" href="#item7">
					北京
				</a>
				<a class="mui-control-item" href="#item8">
					北京
				</a>
			</div>
		</div>
		<div class="mui-slider-group">

			<div class="mui-slider-item mui-control-content mui-active" id="item1">
				第一个内容区容器
			</div>
			<div class="mui-slider-item mui-control-content" id="item2">
				第一个内容区容器
			</div>
			<div class="mui-slider-item mui-control-content" id="item3">
				第一个内容区容器
			</div>
			<div class="mui-slider-item mui-control-content" id="item4">
				第一个内容区容器
			</div>
			<div class="mui-slider-item mui-control-content" id="item5">
				第一个内容区容器
			</div>
			<div class="mui-slider-item mui-control-content" id="item6">
				第一个内容区容器
			</div>
			<div class="mui-slider-item mui-control-content" id="item7">
				第一个内容区容器
			</div>
			<div class="mui-slider-item mui-control-content" id="item8">
				第一个内容区容器
			</div>
		</div>
	</div>

js部分(如果想实现动态增加内容需要加上下面一段js代码)

<script>
			mui.init()
			var item2Show = false,
				item3Show = false; //子选项卡是否显示标志
			//			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			//				if(event.detail.slideNumber === 1 && !item2Show) {
			//					//切换到第二个选项卡
			//					//根据具体业务，动态获得第二个选项卡内容；
			//					var content = "第二个内容区容器"
			//					//显示内容
			//					document.getElementById("item2").innerHTML = content;
			//					//改变标志位，下次直接显示
			//					item2Show = true;
			//				} else if(event.detail.slideNumber === 2 && !item3Show) {
			//					//切换到第三个选项卡
			//					//根据具体业务，动态获得第三个选项卡内容；
			//					var content = "切换到第三个选项卡"
			//					//显示内容
			//					document.getElementById("item3").innerHTML = content;
			//					//改变标志位，下次直接显示
			//					item3Show = true;
			//				}
			//			});
		</script>