以下是 jQuery移动端竖直分类菜单切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.5" charset="utf-8">
<title>jQuery移动端竖直分类菜单切换代码</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body >
<!--标题区域 start-->
<div class="top_tit">
<span class="top_tit_left"></span>
<span class="top_tit_center">商户详情</span>
</div>
<!--标题区域 end-->
<div class="height2"></div>
<!--内容区域 start-->
<div class="Z_con2_2">
<div class="F_wd_top_con2">
<div class="F_wd_top_con2_l" id="wrapper">
<div>
<ul class="sy">
<li class="current">精品美食</li>
<li>美容美发</li>
<li>开心购物</li>
<li>生活一查通</li>
</ul>
</div>
</div>
<div class="F_wd_top_con2_r" id="wrapper1">
<div class="content">
<ul class="by" style="display: block">
<li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">宫保鸡丁</li>
<li class="F_wd_top_con2_r_borb1">酱牛肉</li>
<li class="F_wd_top_con2_r_borb1">北京烤鸭</li>
<li class="F_wd_top_con2_r_borb1">酸菜鱼</li>
</ul>
</div>
<div class="content">
<ul class="by">
<li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">精剪</li>
<li class="F_wd_top_con2_r_borb1">面膜保湿</li>
<li class="F_wd_top_con2_r_borb1">去痘抗痘</li>
<li class="F_wd_top_con2_r_borb1">化妆品</li>
</ul>
</div>
<div class="content">
<ul class="by">
<li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">超市购物</li>
<li class="F_wd_top_con2_r_borb1">商场购物</li>
</ul>
</div>
<div class="content">
<ul class="by">
<li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">地图</li>
<li class="F_wd_top_con2_r_borb1">充值话费</li>
<li class="F_wd_top_con2_r_borb1">58同城</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
</body>
</html>JS代码(common.js):
$(function(){
//算高度-无头无尾$(".Z_con").css("height",($(window).height()/16-3.3)+"em");
$(".Z_con2").css("height",($(window).height()/16-5.8)+"em");
$(".Z_con2_2").css("height",($(window).height()/16-5.8)+"em");
$(".F_wd_top_con2_l").css("height",($(window).height()/16-5.4)+"em");
$(".F_wd_top_con2_r").css("height",($(window).height()/16-5.4)+"em");
$(".F_wd_top_con2_l_2").css("height",($(window).height()/16-8.6)+"em");
$(".F_wd_top_con2_r_2").css("height",($(window).height()/16-8.6)+"em");
//竖直切换 $(function(){
window.onload = function(){
var $li = $('.sy li');
var $ul = $('.content .by');
$li.click(function(){
var $this = $(this);
var $t = $this.index();
$li.removeClass();
$this.addClass('current');
$ul.css('display','none');
$ul.eq($t).css('display','block');
}
)}
}
);
$(function(){
$(".F_wd_top_con2_r_borb1").click(function(){
$(this).addClass("F_wd_top_con2_r_borb2").siblings().removeClass("F_wd_top_con2_r_borb2");
}
)}
)}
);
CSS代码(common.css):
.F_wd_top_con2{width:100%;min-height:4em;background:#fff;border-top:0.1em solid #ccc;}
.F_wd_top_con2_l{width:40%;background:#f2f2f2;float:left;}
.F_wd_top_con2_l ul li{line-height:3.2em;text-indent:1em;border-bottom:0.1em solid #f2f2f2;}
.F_wd_top_con2_r{width:60%;float:right;}
.F_wd_top_con2_r ul li{line-height:3.2em;text-indent:1em;}
.F_wd_top_con2_r_borb1{border-bottom:0.1em solid #ccc;}
.F_wd_top_con2_r_borb2{border-bottom:0.1em solid #2b57ae;color:#2b57ae;}
.F_wd_top_con2_l_1{width:40%;float:left;}
.F_wd_top_con2_l_1 ul li{line-height:3.2em;text-indent:1em;}
.F_wd_top_con2_r_1{width:55%;float:right;}
.F_wd_top_con2_r_1 ul li{line-height:3.2em;text-indent:1em;}
.F_wd_top_con2_l_2{width:40%;background:#f2f2f2;float:left;}
.F_wd_top_con2_l_2 ul li{line-height:3.2em;text-indent:1em;border-bottom:0.1em solid #f2f2f2;}
.F_wd_top_con2_r_2{width:55%;float:right;}
.F_wd_top_con2_r_2 ul li{line-height:3.2em;text-indent:1em;}
.current{background:#fff;color:#2b57ae;}
.by{display:none;}
/**********知情**********/
@media screen and (min-height:660px){}
CSS代码(main.css):
*,body,div,p,table,td,input,option,textarea,select{margin:0;padding:0;font-size:1em;color:#666666;font-family:'微软雅黑';}
body{overflow:hidden;}
span,b{display:inline-block;font-weight:normal;}
h1,h2,h3,h4,h5{font-weight:normal;}
ul{list-style-type:none;margin:0;padding:0;}
table{border-collapse:collapse;}
table tr th{font-weight:normal;}
small{font-size:inherit;color:#F00;}
.bg_none{background:none;}
.displayN{display:none;}
.clear{clear:both;}
.float_l{float:left;}
.float_r{float:right;}
.txtL{text-align:left;}
.txtC{text-align:center;}
.txtR{text-align:right;}
.height025{height:.25em;clear:both;}
.height05{height:.5em;clear:both;}
.height1{height:1em;clear:both;}
.height15{height:1.5em;clear:both;}
.height13{height:1.3em;clear:both;}
.height2{height:2em;clear:both;}
.height3{height:3em;clear:both;}
.height4{height:4em;clear:both;}
.height10{height:7em;clear:both;}
.font_07{font-size:0.7em;}
.font_08{font-size:0.8em;}
.font_1_1{font-size:1.1em;}
.bold{font-weight:bold;}
.bg_body{background:#efeff4;}
.body_over_auto{overflow:auto;}
/**文字颜色**/
.txt_blue{color:#007aff;}
.txt_red{color:#fe0a0b;}
.txt_org{color:#ff7900;}
/*表单样式*/
input:focus{outline:none;}
.width_100{width:100%;padding-right:0;}
.width_5em{width:5em;}
.width_6em{width:6em;}
.width_7em{width:7em;}
.width_10em{width:10em;}
.width_11em{width:11em;}
.width_12em{width:12em;}
.width_15em{width:15em;}
/*按钮*/
.btn_blue{text-align:center;color:#fff;border-radius:0.4em;line-height:2em;background:#035eb1;padding:0 2em;}
/*复选框样式*/
/*图标*/
.icon_time{width:1em;height:1em;background:url(../img/icon_time.png) no-repeat;background-size:100% 100%;margin:0 0.1em -0.1em 0;}
/*顶部样式*/
.top_tit{background:#2b57ae;height:2.7em;overflow:hidden;}
/*页面框架*/
.top_tit{height:3.3em;background:#2b57ae;}
.top_tit_center{width:60%;margin:0 auto;font-size:1.2em;color:#FFF;display:block;text-align:center;height:2.7em;line-height:2.7em;}
.top_tit_left{width:1.5em;height:1.5em;float:left;display:block;background:url(../img/top_l_arrow.png) no-repeat;background-size:100% 100%;display:block;margin:0.9em 0 0 0.5em;}
分享到QQ
分享到微博
微信扫一扫
