html5移动端全部分类页面详解

前言

在写移动端业务的时候，经常会搞全部分类的页面，常常是焦头烂额，现整理出来与大家交流，话不多说，看效果，这里给大家两种参考样式，核心技术都是一样的，这里给大家介绍样式一

原理介绍：

页面整体只有一个ul，大家看到的vh/vw都是单位，意为页面高度、页面宽度。这里给ul的宽度为width: 33vw;在ul下有三个li，每个li下有一个a标签，一个div容器。其中，我们默认这些div容器都是隐藏状态的，当我们点击相应li时，显示对应的div。这里用到的布局为display：flex布局。当进入该页时，我们默认类目一是选中状态的，我们使用addClass为其添加样式。当用户再点击其他li时，取消它的样式，为用户点击的li添加样式。

做出这个页面需要大家有良好的css布局基础和一些jQuery/js基础

 

样式一

 html

<div class="all">
			<!-- 搜索框 -->
			<div id="search">
				<div class="mui-input-row mui-search" style="border-radius: 5px;width: 96%;margin: 0 auto;">
					<input type="search" class="mui-input-clear" placeholder="点击搜索">
				</div>
			</div>
			<!-- 滑动门 -->
			<div class="bg">
				<ul style="height: 100%;">
					<li>
						<a href="#" class="first">类目一</a>
						<div class="div2">
							<div class="banner" style="width: 100%;">
								<img width="100%" src="images/fi