前言
在写移动端业务的时候，经常会搞全部分类的页面，常常是焦头烂额，现整理出来与大家交流，话不多说，看效果，这里给大家两种参考样式，核心技术都是一样的，这里给大家介绍样式一
原理介绍：
页面整体只有一个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/five.png">
</div>
<div class="all">
<h5 class="second_title">这是二级标题</h5>
<div class="cate">
<a href="#" onclick="test()">
<p>aaaaaa</p>
</a>
<a href="#">
<p>java开发共产三国</p>
</a>
<a href="#">
<p>眉笔</p>
</a>
<a href="#">
<p>BB霜</p>
</a>
</div>
<h5 class="second_title">这是二级标题</h5>
<div class="cate">
<a href="#">
<p>ccc</p>
</a>
<a href="#">
<p>rrrrbb</p>
</a>
<a href="#">
<p>笔</p>
</a>
<a href="#">
<p>BB2霜</p>
</a>
</div>
</div>
</div>
</li>
<li>
<a href="#">类目二</a>
<div class="div2">
<div class="banner">
<img width="100%" src="images/five.png">
</div>
<div class="all">
<h5 class="second_title">这是二级标题</h5>
<div class="cate">
<a href="#">
<p>aaaaaa</p>
</a>
<a href="#">
<p>bbbb</p>
</a>
<a href="#">
<p>眉笔</p>
</a>
<a href="#">
<p>BB霜</p>
</a>
</div>
<h5 class="second_title">这是二级标题</h5>
<div class="cate">
<a href="#">
<p>ccc</p>
</a>
<a href="#">
<p>rrrrbb</p>
</a>
<a href="#">
<p>笔</p>
</a>
<a href="#">
<p>BB2霜</p>
</a>
</div>
</div>
</div>
</li>
<li>
<a href="#">类目三</a>
<div class="div2">
<div class="banner">
<img width="100%" src="images/five.png">
</div>
<div class="all">
<h5 class="second_title">这是二级标题</h5>
<div class="cate">
<a href="#">
<p>aaaaaa</p>
</a>
<a href="#">
<p>bbbb</p>
</a>
<a href="#">
<p>眉笔</p>
</a>
<a href="#">
<p>BB霜</p>
</a>
</div>
<h5 class="second_title">这是二级标题</h5>
<div class="cate">
<a href="#">
<p>ccc</p>
</a>
<a href="#">
<p>rrrrbb</p>
</a>
<a href="#">
<p>笔</p>
</a>
<a href="#">
<p>BB2霜</p>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
body {
margin: 0;
padding: 0;
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
.all {
width: 100%;
height: 100%;
}
.bg {
width: 33vw;
height: 93%;
box-sizing: border-box;
border-right: 1px rgba(215, 215, 215, 0.6) solid;
overflow: hidden;
}
body {}
ul {
list-style: none;
padding: 0px;
margin: 0;
width: 33vw;
/* background: rgba(0, 0, 0, 0.6); */
/*定位 作为父级使用*/
position: fixed;
}
ul li {
height: 50px;
line-height: 50px;
list-style-type: none;
text-align: center;
}
ul li:hover {
background: #FFFFFF;
color: black;
font-weight: bold;
}
ul li a {
text-decoration: none;
font-size: 14px;
color: black;
}
ul li:hover>a {
color: black;
font-weight: bold;
}
/*滑动门*/
.div2 {
width: 67vw;
/* background: skyblue; */
/*使用定位实现滑动门-------重要步骤*/
position: absolute;
top: 0;
left: 33vw;
display: none;
}
/*当鼠标悬停在内容上是显示对应的代码块*/
.playdiv1 {
/* background: rgb(27, 202, 173); */
background: #FFFFFF;
font-weight: bold;
color: black;
}
.play {
display: block;
width: 66vw;
height: 90vh;
text-align: center;
/*justify-content: space-between;*/
padding: 0px 10px 80px 10px;
background: #FFFFFF;
margin-bottom: 6.25rem;
padding-bottom: 6.25rem;
/* border: 1px red solid; */
overflow: auto;
/* winphone8和android4+ */
-webkit-overflow-scrolling: touch;
/* ios5+ */
}
.cate {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
ul div a {
padding:0 1rem;
color: black;
height: 35px;
line-height: 35px;
border-radius: 50px;
margin: 3px;
-moz-box-shadow: 1px 1px 3px #333333;
-webkit-box-shadow: 1px 1px 3px #333333;
box-shadow: 1px 1px 3px #333333;
}
.second_title {
text-align: left;
color: black;
}
.second_title:after {
content: ">>";
}
#search {
width: 100%;
margin: 0 auto;
height: auto;
padding-top: 10px;
padding-bottom: 0;
margin-bottom: 0;
}
jquery
var jq = $.noConflict();
jq(function() {
//进入页面,默认选中第一种类
jq("ul li:first").children('div').addClass('play');
jq("ul li:first").addClass('playdiv1');
jq(".first").addClass("fir")
jq("li").click(function() {
jq("ul li:first").removeClass('playdiv1');
jq(this).children('a').addClass('fir');
jq("a:not(this)").removeClass("fir");
jq("li:not(this)").children('div').removeClass('play');
jq(this).children('div').addClass('play');
})
})
| 
转播
