我想要做一个js效果，图片里面有
-
我要仿照的效果是从这个网站上来的： http://47.mp.51letaotao.com/uebuycar/...
-
我的目标是将我下面的页面能够实现上面网站的那种 按照字母顺序排列结果 的效果
<!DOCTYPE html>
<html>
<head>
<title>优易购车</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link href="css/css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/swipe.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<!--展开js-->
<script type="text/javascript" src="js/zhankai.js"></script>
<!--文字滚动js-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<section class="pbd">
<!-----TOP------>
<div class="top">
<dl>
<dt class="back"><a href="index.html"><img src="images/back.png"/>返回</a></dt>
<dd><a href="index.html"><img src="images/logo.png"></a></dd>
<dt class="nav"><a href="login.html"><img src="images/butbg4.png" /></a></dt>
</dl>
<div class="clear"></div>
</div>
<!-----TOP END------>
<div class="car">
<dl>
<dt><a href="car.html"><img src="images/cas_h.png" /> 全城比价</a></dt>
<dd><a href="tejiache.html"><img src="images/tejiache.png" / style=" margin-top:10px;"> 新车特卖</a></dd>
<dd><a href="ershouche.html"><img src="images/ershouche.png" /> 品牌二手车</a></dd>
</dl>
</div>
<div class="carsosbox">
<div class="carsosbox_ipu">
<select name="select">
<option>选品牌</option>
<option>奥迪</option>
<option>本田</option>
<option>标致</option>
<option>别克</option>
<option>奔驰</option>
<option>宝马</option>
<option>大众</option>
<option>道奇</option>
<option>丰田</option>
<option>福特</option>
</select>
<select name="select">
<option>选车型</option>
<option>Q5</option>
<option>Q3</option>
<option>A6L</option>
<option>A4L </option>
<option>A3（国产）</option>
<option>TT</option>
<option>Q7</option>
<option>A8L </option>
<option>A7</option>
<option>A5</option>
<option>A3（进口）</option>
</select>
<a href="carpj.html">进入车型</a>
</div>
</div>
<div class="carbox">
<div class="grad">
<h1>全城300家4S店低价PK，为您获得最优车价！</h1>
<span></span>
</div>
<div class="carpk">
<div class="carpk_ty">
<div class="carpk_ty_car">
<dl>
<dt><img src="images/carimg_06.png" /></dt>
<dd>
<span>华晨宝马 3系Li</span>
138****9283 历史比价案例
</dd>
</dl>
</div>
<div class="carpk_ty_pk"><img src="images/carpk.png" /></div>
<div class="clear"></div>
</div>
<div class="carpktitelt">
<ul>
<li id="one1" onClick="setTab('one',1,3)" class="hover">4S店一<span>14.27万</span></li>
<li id="one2" onClick="setTab('one',2,3)">4S店二<span>14.27万</span></li>
<li id="one3" onClick="setTab('one',3,3)">4S店三<span>14.27万</span></li>
</ul>
<div class="clear"></div>
</div>
<!----------------切换内容1------------->
<div id="con_one_1" class="carpktxt" style="display:block;">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th style="font-weight:bold; font-size:16px;">比价4S店</th>
<td>
<div class="carpktxt_img">
<dl>
<dt><img src="images/cartsimg_07.jpg" /></dt>
<dd><strong>宝马红柳路店</strong><img src="images/rz_07.png" /><br/>销售经理 李** </dd>
</dl>
</div>
</td>
</tr>
<tr>
<th>现 车</th>
<td>有现车，3个工作日提车</td>
</tr>
<tr>
<th>现金优惠</th>
<td><span class="hong">23.58万</span> <span class="fu">28.58万</span> <span class="lv">↓5.88万</span></td>
</tr>
<tr>
<th>出 库 费</th>
<td>500元</td>
</tr>
<tr>
<th>PDI检测费</td>
<td>0元</td>
</tr>
<tr>
<th>服 务 费</th>
<td>1500元</td>
</tr>
<tr>
<th>购 置 税</th>
<td>17980元</td>
</tr>
<tr>
<th>保 险</th>
<td>5600元，人保财险</td>
</tr>
<tr>
<th>牌 照</th>
<td>5500，江西，南昌</td>
</tr>
<tr>
<th>购车总价</th>
<td><span class="lan">26.78万</span></td>
</tr>
<tr>
<th>4S店赠送</th>
<td>5000元（3M贴膜，迪奥香水，</td>
</tr>
</table>
<div class="carpktxt_pk"><img src="images/pk.png" /></div>
</div>
<!----------------切换内容2------------->
<div id="con_one_2" class="carpktxt">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th style="font-weight:bold; font-size:16px;">比价4S店</th>
<td>
<div class="carpktxt_img">
<dl>
<dt><img src="images/cartsimg_07.jpg" /></dt>
<dd><strong>测试数据1</strong><img src="images/rz_07.png" /><br/>销售经理 李** </dd>
</dl>
</div>
</td>
</tr>
<tr>
<th>现 车</th>
<td>有现车，3个工作日提车</td>
</tr>
<tr>
<th>现金优惠</th>
<td><span class="hong">23.58万</span> <span class="fu">28.58万</span> <span class="lv">↓5.88万</span></td>
</tr>
<tr>
<th>出 库 费</th>
<td>500元</td>
</tr>
<tr>
<th>PDI检测费</td>
<td>0元</td>
</tr>
<tr>
<th>服 务 费</th>
<td>1500元</td>
</tr>
<tr>
<th>购 置 税</th>
<td>17980元</td>
</tr>
<tr>
<th>保 险</th>
<td>5600元，人保财险</td>
</tr>
<tr>
<th>牌 照</th>
<td>5500，江西，南昌</td>
</tr>
<tr>
<th>购车总价</th>
<td><span class="lan">26.78万</span></td>
</tr>
<tr>
<th>4S店赠送</th>
<td>5000元（3M贴膜，迪奥香水，</td>
</tr>
</table>
<div class="carpktxt_pk"><img src="images/pk.png" /></div>
</div>
<!----------------切换内容3------------->
<div id="con_one_3" class="carpktxt">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th style="font-weight:bold; font-size:16px;">比价4S店</th>
<td>
<div class="carpktxt_img">
<dl>
<dt><img src="images/cartsimg_07.jpg" /></dt>
<dd><strong>测试数据2</strong><img src="images/rz_07.png" /><br/>销售经理 李** </dd>
</dl>
</div>
</td>
</tr>
<tr>
<th>现 车</th>
<td>有现车，3个工作日提车</td>
</tr>
<tr>
<th>现金优惠</th>
<td><span class="hong">23.58万</span> <span class="fu">28.58万</span> <span class="lv">↓5.88万</span></td>
</tr>
<tr>
<th>出 库 费</th>
<td>500元</td>
</tr>
<tr>
<th>PDI检测费</td>
<td>0元</td>
</tr>
<tr>
<th>服 务 费</th>
<td>1500元</td>
</tr>
<tr>
<th>购 置 税</th>
<td>17980元</td>
</tr>
<tr>
<th>保 险</th>
<td>5600元，人保财险</td>
</tr>
<tr>
<th>牌 照</th>
<td>5500，江西，南昌</td>
</tr>
<tr>
<th>购车总价</th>
<td><span class="lan">26.78万</span></td>
</tr>
<tr>
<th>4S店赠送</th>
<td>5000元（3M贴膜，迪奥香水，</td>
</tr>
</table>
<div class="carpktxt_pk"><img src="images/pk.png" /></div>
</div>
<div class="carnews">
<div class="carnews_list">
<ul class="news_li">
<li>5分钟前 138****9283 科鲁兹</li>
<li>5分钟前 138****9283 科鲁兹</li>
<li>5分钟前 138****9283 科鲁兹</li>
<li>5分钟前 138****9283 科鲁兹</li>
</ul>
<ul class="swap"></ul>
</div>
<div class="carnews_txt">共有4890人参与比价</div>
</div>
</div>
</div>
<div class="carlistbox">
<div class="carlistitle">
<dl>
<dt>热门车型</dt>
<dd><a href="#"><img src="images/carright.png" /></a></dd>
</dl>
</div>
<div class="carlist">
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<dl>
<dt><a href="#"><img src="images/carimg_06.png" /></a></dt>
<dd><a href="#">3系Li</a></dd>
</dl>
<div class="clear"></div>
</div>
</div>
<div class="xf"><a class="pk" href="carpk.html">立即比价！</a><a class="zc" href="#">找 车</a><div class="clear"></div></div>
<!----- Bottom ------->
<div class="bottom">
关于我们 <span>│</span> 优易购车客服热线 400-879-8779<br/>
上海轩言网络 沪ICP备12049095号-2
</div>
<div class="bottom_b"></div>
</section>
</body>
</html>
mars2
10 years, 2 months ago