淘寶商品jQuery列表多條件查詢（含有多選和所有）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘寶商品jQuery列表多條件查詢特效代碼_其它代碼_JS代碼_一流資源網 </title>
<meta name="keywords" content="jQuery列表多條件查詢特效代碼" />
<meta name="description" content="一款仿淘寶購物的商品列表頁面多條件查詢篩選商品種類特效代碼。"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
/* select */
.select{padding:5px 10px;border:#ddd 1px solid;border-radius:4px;width:60%;margin:5% auto;font-size:12px}
.select li{list-style:none;padding:10px 0 5px 100px}
.select .select-list{border-bottom:#eee 1px dashed}
.select dl{zoom:1;position:relative;line-height:24px;}
.select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
.select dt{width:100px;margin-bottom:5px;position:absolute;top:0;left:-100px;text-align:right;color:#666;height:24px;line-height:24px}
.select dd{float:left;display:inline;margin:0 0 5px 5px;}
.select dd a{display:inline-block;white-space:nowrap;height:24px;padding:0 10px;text-decoration:none;color:#039;border-radius:2px;}
.select dd a:hover{color:#f60;background-color:#f3edc2}
.select .selected a{color:#fff;background-color:#f60}
.select-result dt{font-weight:bold}
.select-no{color:#999}
.select .select-result a{padding-right:20px;color:#fff;background:#f60 url("close.gif") right 9px no-repeat}
.select .select-result a:hover{background-position:right -15px}javascript
</style>
</head>css
<body>html
<div align="center">java
<!--/////////////////////////////////////////////////////////////////////////-->
<ul class="select">
<li class="select-list">
<dl id="select1">
<dt>上裝：</dt>
<dd class="select-all selected"><a href="#">所有</a></dd>
<dd class="acti" date-type="1"><a href="#">針織衫</a></dd>
<dd class="acti" date-type="2"><a href="#">毛呢外套</a></dd>
<dd class="acti" date-type="3"><a href="#">T恤</a></dd>
<dd class="acti" date-type="4"><a href="#">羽絨服</a></dd>
<dd class="acti" date-type="5"><a href="#">棉衣</a></dd>
<dd class="acti" date-type="6"><a href="#">衛衣</a></dd>
<dd class="acti" date-type="7"><a href="#">風衣</a></dd>
</dl>
</li>
<li class="select-result">
<dl>
<dt>已選條件：</dt>
<dd class="select-no">暫時沒有選擇過濾條件</dd>
</dl>
</li>
</ul>
<!--/////////////////////////////////////////////////////////////////////////-->
</div>jquery
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#select1 dd.acti").click(function(){app
var type=$(this).attr("date-type");
var copyThisA = $(this).clone();
if($(this).hasClass('selected')){
$(".select-result dd[date-type='"+type+"']").hide();
}
else{
$(this).siblings('.select-all').removeClass('selected');
$(".select-result dl").append(copyThisA);
}
$(this).toggleClass('selected');
})
$(".select-result").delegate("dd","click",function(){
var type=$(this).attr("date-type");
$(this).hide();
$("#select1 dd[date-type='"+type+"']").removeClass('selected');
if(!$("#select1 dd").hasClass("selected")){
$("#select1 .select-all").addClass("selected");
}
})ide
$(".select dd").live("click", function () {
if ($("#select1 .select-all").hasClass("selected") || !$("#select1 dd").hasClass("selected")) {
$("#select1 .select-all").addClass("selected");
$(".select-no").show();
} else{
$(".select-no").hide();
}
});ui
});this
</script>url
- 1. 一款仿淘寶購物的商品列表頁面多條件查詢（含有單選和所有）
- 2. 淘淘商城——day2（所有商品的展示：查詢所有商品）
- 3. 查詢淘寶京東天貓拼多多商品歷史價格的方法
- 4. 我離淘寶有多遠？
- 5. HTML多條件篩選商品
- 6. HBase條件查詢（多條件查詢）
- 7. 商品列表查詢
- 8. bootstrap之仿淘寶商品列表
- 9. 多條件查詢
- 10. 淘寶API item_search_shop - 獲得店鋪的所有商品
- 更多相關文章...
- • 多對多關聯查詢 - MyBatis教程
- • Rust 所有權 - RUST 教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • 再有人問你分佈式事務，把這篇扔給他
-
每一个你不满意的现在，都有一个你没有努力的曾经。