你的位置:首页 > 网页设计

[网页设计]基于html5手机端信息筛选条件代码


基于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