基于jQuery仿去哪儿城市选择代码
2023-09-27 14:28:19 时间
基于jQuery仿去哪儿城市选择代码。这是一款使用的jQuery城市选择特效代码下载。效果图如下:
实现的代码。
html代码:
<div class="lineSearch"> <ul> <li class="thRelative" id="hhDrop00"> <div class="boxSearch"> <span class="key_word"> <b class="size_14">北京</b> 出发城市 </span> <em class="ico thLeft ico_shBlue"></em> <a class="thRight ico btn_search" href="javascript:void(0)"></a> </div> <div class="search_form_suggest" style="display:none;"> <h3><a class="ico btn_close thRight" item="close">关闭</a>热门出发城市</h3> <dl class="search_hotList"> <dd class="clr_after"> <a href="#">北京</a> <a href="#">上海</a> <a href="#">广州</a> <a href="#">成都</a> <a href="#">杭州</a> <a href="#">南京</a> <a href="#">深圳</a> <a href="#">济南</a> <a href="#">石家庄</a> <a href="#">武汉</a> <a href="#">郑州</a> <a href="#">重庆</a> <a href="#">福州</a> <a href="#">西安</a> <a href="#">长沙</a> <a href="#">沈阳</a> <a href="#">天津</a> <a href="#">哈尔滨</a> <a href="#">苏州</a> <a href="#">南宁</a> </dd> </dl> <div class="clear"></div> <div class="select_city_box" item="dep-search"> <span>输入出发城市</span> <input type="text" class="input_city" item="key"> <button class="btn" type="button" item="commit"></button> <div class="search_city_result" item="result" style="display:;"> <a href="javascript:void();">广州</a> 没有匹配城市 </div> </div> <div class="thLeft thPadT5 tab_select"> <dl class="clrfix"> <dt>A-G</dt> <dd class="clr_after"> <a href="#">北京</a> <a href="#">长沙</a> <a href="#">成都</a> <a href="#">重庆</a> <a href="#">福州</a> <a href="#">广州</a> <a href="#">贵阳</a> </dd> </dl> <dl class="clrfix"> <dt>H-L</dt> <dd class="clr_after"> <a href="#">哈尔滨</a> <a href="#">杭州</a> <a href="#">合肥</a> <a href="#">济南</a> <a href="#">昆明</a> </dd> </dl> <dl class="clrfix"> <dt>M-T</dt> <dd class="clr_after"> <a href="#">南昌</a> <a href="#">南京</a> <a href="#">南宁</a> <a href="#">宁波</a> <a href="#">青岛</a> <a href="#">三亚</a> <a href="#">上海</a> <a href="#">沈阳</a> <a href="#">深圳</a> <a href="#">石家庄</a> <a href="#">苏州</a> <a href="#">太原</a> <a href="#">天津</a> </dd> </dl> <dl class="clrfix"> <dt>W-Z</dt> <dd class="clr_after"> <a href="#">武汉</a> <a href="#">厦门</a> <a href="#">西安</a> <a href="#">郑州</a> <a href="#">中山</a> </dd> </dl> </div> </div> </li> <li class="thRelative" id="hhDrop01"> <div class="boxSearch"> <span class="key_word"> <b class="size_14">广州</b> 到达城市 </span> <em class="ico thLeft ico_shBlue"></em> <a class="thRight ico btn_search" href="javascript:void(0)"></a> </div> <div class="search_form_suggest" style="display:none;"> <h3><a class="ico btn_close thRight" item="close">关闭</a>热门出发城市</h3> <dl class="search_hotList"> <dd class="clr_after"> <a href="#">北京</a> <a href="#">上海</a> <a href="#">广州</a> <a href="#">成都</a> <a href="#">杭州</a> <a href="#">南京</a> <a href="#">深圳</a> <a href="#">济南</a> <a href="#">石家庄</a> <a href="#">武汉</a> <a href="#">郑州</a> <a href="#">重庆</a> <a href="#">福州</a> <a href="#">西安</a> <a href="#">长沙</a> <a href="#">沈阳</a> <a href="#">天津</a> <a href="#">哈尔滨</a> <a href="#">苏州</a> <a href="#">南宁</a> </dd> </dl> <div class="clear"></div> <div class="select_city_box" item="dep-search"> <span>输入出发城市</span> <input type="text" class="input_city" item="key"> <button class="btn" type="button" item="commit"></button> <div class="search_city_result" item="result" style="display:;"><a href="javascript:void(0);">北京</a> 没有匹配城市</div> </div> <div class="thLeft thPadT5 tab_select"> <dl class="clrfix"> <dt>A-G</dt> <dd class="clr_after"> <a href="#">北京</a> <a href="#">长沙</a> <a href="#">成都</a> <a href="#">重庆</a> <a href="#">福州</a> <a href="#">广州</a> <a href="#">贵阳</a> </dd> </dl> <dl class="clrfix"> <dt>H-L</dt> <dd class="clr_after"> <a href="#">哈尔滨</a> <a href="#">杭州</a> <a href="#">合肥</a> <a href="#">济南</a> <a href="#">昆明</a> </dd> </dl> <dl class="clrfix"> <dt>M-T</dt> <dd class="clr_after"> <a href="#">南昌</a> <a href="#">南京</a> <a href="#">南宁</a> <a href="#">宁波</a> <a href="#">青岛</a> <a href="#">三亚</a> <a href="#">上海</a> <a href="#">沈阳</a> <a href="#">深圳</a> <a href="#">石家庄</a> <a href="#">苏州</a> <a href="#">太原</a> <a href="#">天津</a> </dd> </dl> <dl class="clrfix"> <dt>W-Z</dt> <dd class="clr_after"> <a href="#">武汉</a> <a href="#">厦门</a> <a href="#">西安</a> <a href="#">郑州</a> <a href="#">中山</a> </dd> </dl> </div> </div> </li> <li> <div class="thRelative lineSearchbg"> <em class="thLeft ico ico_serGray"></em> <input class="thLeft" name="textfield2" type="text" id="arriveSearchText" value="请输入目的地、主题或关键词" /> <a class="ico btn_close thLeft" item="close" style="margin:8px 8px 0 0;" id="btn_delete" >删除</a> <a class="ico btn_search" item="commit" href="javascript:void(0)">搜 索</a> </div> </li> </ul> </div> <div style="text-align:center;clear:both"> </div>
相关文章
- JQuery对ASP.NET MVC数据进行更新删除
- MVC应用程序的jQuery代码重构
- 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
- jQuery:jQuery笔记1
- jquery获取复选框的值
- Web jquery表格组件 JQGrid 的使用 - 全部代码
- 利用jquery对ajax操作,详解原理(附代码)
- 基于jQuery仿淘宝产品图片放大镜代码
- ****timeago.js插件:jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- Eclipse支持HTML&JS&ExtJS&jQuery代码智能提示
- 基于jQuery可悬停控制图片轮播代码
- 基于jQuery商城网站全屏图片切换代码
- 基于jQuery适合做图片类网站的特效
- 基于jQuery果冻式按钮焦点图切换代码
- 基于jQuery左右滑动切换图片代码
- 基于jquery右侧悬浮加入购物车代码
- 基于jquery带时间轴的图片轮播切换代码
- 基于jQuery实现文字倾斜显示代码