基于html5手机端信息筛选条件代码
阅读：44
时间：2018-02-03 03:17
基于html5手机端信息筛选条件代码。这是一款仿苹果iPhone手机版美团网信息筛选条件代码。
实现的代码：
<!-- screening -->
<div class="screening">
<ul>
<li class="meishi">美食</li>
<li class="Regional">附近</li>
<li class="Sort">排序</li>
<li class="Brand">筛选</li>
</ul>
</div>
<!-- End screening -->
<!-- grade -->
<div class="meishi22">
<ul class="meishia-w" id="meishia">
<li onclick="meishia(this)"><div class="meishi1">全部分类 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi2">美食 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi3">电影 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi4">酒店 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi5">休闲娱乐 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi6">KTV <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi7">丽人 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi8">外卖 <span class="xiaobiao">1225></span></div></li>
</ul>
<ul class="meishia-t" id="meishib">
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
</ul>
</div>
<div class="grade-eject">
<ul class="grade-w" id="gradew">
<li onclick="grade1(this)">哈尔滨 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">全国 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">北京 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">天津 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">河北 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">山西 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">内蒙古 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">辽宁 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">吉林 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">黑龙江 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">上海 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">江苏 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">山东 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">河南 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">湖北 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">湖南 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">广东 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">广西 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">海南 <span class="xiaobiao">1225></span></li>
</ul>
<ul class="grade-t" id="gradet">
<div class="zimu">A</div>
<li onclick="gradet(this)">全河北 <span class="xiaobiao1">1225</span></li>
<div class="zimu">B</div>
<li onclick="gradet(this)">石家庄 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">唐山 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">秦皇岛 <span class="xiaobiao1">1225</span></li>
<div class="zimu">C</div>
<li onclick="gradet(this)">邢台 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">保定 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">张家口 <span class="xiaobiao1">1225</span></li>
<div class="zimu">D</div>
<li onclick="gradet(this)">承德 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">沧州 <span class="xiaobiao1">1225</span></li>
<div class="zimu">E</div>
<li onclick="gradet(this)">廊坊 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">衡水 <span class="xiaobiao1">1225</span></li>
</ul>
</div>
<!-- End grade -->
<!-- Category -->
<div class="Sort-eject Sort-height">
<ul class="Sort-Sort" id="Sort-Sort">
<li onclick="Sorts(this)">智能排序</li>
<li onclick="Sorts(this)">离我最近</li>
<li onclick="Sorts(this)">好评优先</li>
<li onclick="Sorts(this)">人气优先</li>
<li onclick="Sorts(this)">价格最低</li>
<li onclick="Sorts(this)">价格最高</li>
</ul>
</div>
<!-- End Category -->
<!-- Category -->
<script src="js/truck.23648f77.js"></script>
<div class="Category-eject">
<ul class="Category-w" id="Categorytw">
<li onclick="Categorytw(this)">
优惠买单
<span>
<div class="wrap">
<input type="checkbox" id="s5">
<label class="slider-v3" for="s5"></label>
</div>
</span>
</li>
<li onclick="Categorytw(this)">
只看免预约
<span>
<div class="wrap">
<input type="checkbox" id="s6">
<label class="slider-v3" for="s6"></label>
</div>
</span>
</li>
<li onclick="Categorytw(this)">
节假日可用
<span>
<div class="wrap">
<input type="checkbox" id="s7">
<label class="slider-v3" for="s7"></label>
</div>
</span>
</li>
<li onclick="Categorytw(this)">用餐人数</li>
<li onclick="Categorytw(this)">
<div class="choose" id="dress-size">
<form action="" method="get">
<div class="choosebox">
<ul class="clearfix">
<li>
<input type="radio" name="name" value="S" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">不限</span></a>
</li>
<li>
<input type="radio" name="name" value="M" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">单人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="L" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">双人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XL" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">3~4人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">5~10人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">10人以上</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">其它</span></a>
</li>
</ul>
</div>
<div style="margin-top:100px;"><button type="submit" class="btn-img"><span>完成</span></button></div>
</form>
</div>
</li>
<li onclick="Categorytw(this)"></li>
<li onclick="Categorytw(this)"></li>
</ul>
</div>
via：http://www.w2bc.com/article/78032
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3