Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
代码如下:
<%@ page language="c#" autoeventwireup="true" codefile="jquerysort.x.cs" inherits="demo_jquerysort" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery分类</title>
<script src="../scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//品牌
var alink01 = $("#linktype01").find("span");
alink01.click(function () {
alink01.each(function () {
$(this).removeclass("templinkactive").addclass("templink");
});
$(this).removeclass("templink").addclass("templinkactive");
$("#brand").val($(this).attr("tag"));
})
//价格
var alink02 = $("#linktype02").find("span");
alink02.click(function () {
alink02.each(function () {
$(this).removeclass("templinkactive").addclass("templink");
});
$(this).removeclass("templink").addclass("templinkactive");
$("#price").val($(this).attr("tag"));
})
//尺寸
var alink03 = $("#linktype03").find("span");
alink03.click(function () {
alink03.each(function () {
$(this).removeclass("templinkactive").addclass("templink");
});
$(this).removeclass("templink").addclass("templinkactive");
$("#size").val($(this).attr("tag"));
setpara();
})
});
function setpara() {
var a = $("#brand").val();
var b = $("#price").val();
var c = $("#size").val();
alert("1.aspx?a=" + a + "&b=" + b + "&c=" + c);
};
</script>
<style type="text/css">
.templinkactive
{
padding:5px;
text-decoration:none;
background-color: #2788da;
color:#ffffff;
}
.templink
{
cursor:pointer;
padding:5px;
text-decoration:none;
}
table tr{ height:35px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
<table>
<tr id="linktype01">
<td style="width:100px">
<b>笔记本品牌</b>
</td>
<td>
<span class='templinkactive' tag="0">不限</span>
</td>
<td>
<span class='templink' tag="100101">联想（lenovo）</span>
</td>
<td>
<span class='templink' tag="100102">宏碁（acer）</span>
</td>
<td>
<span class='templink' tag="100103">华硕（asus）</span>
</td>
<td>
<span class='templink' tag="100104">戴尔（dell）</span>
</td>
<td>
<span class='templink' tag="100105">苹果（apple）</span>
</td>
<td>
<span class='templink' tag="100106">三星 （samsung）</span>
</td>
</tr>
<tr id="linktype02">
<td style="width:100px">
<b>价格范围</b>
</td>
<td>
<span class='templinkactive' tag="0">不限</span>
</td>
<td>
<span class='templink' tag="100201">1000-2999</span>
</td>
<td>
<span class='templink' tag="100202">3000-3499</span>
</td>
<td>
<span class='templink' tag="100203">4000-4499</span>
</td>
<td>
<span class='templink' tag="100204">5000-5999</span>
</td>
<td>
<span class='templink' tag="100205">6000-6999</span>
</td>
<td>
<span class='templink' tag="100206">7000及以上</span>
</td>
</tr>
<tr id="linktype03">
<td style="width:100px">
<b>尺寸范围</b>
</td>
<td>
<span class='templinkactive' tag="0" >不限</span>
</td>
<td>
<span class='templink' tag="100301">8.9英寸及以下</span>
</td>
<td>
<span class='templink' tag="100302">11英寸</span>
</td>
<td>
<span class='templink' tag="100303">12英寸</span>
</td>
<td>
<span class='templink' tag="100304">13英寸</span>
</td>
<td>
<span class='templink' tag="100305">14英寸</span>
</td>
<td>
<span class='templink' tag="100306">15英寸及以上</span>
<input type="hidden" id="brand" value="0" />
<input type="hidden" id="price" value="0" />
<input type="hidden" id="size" value="0" />
</td>
</tr>
</table>
</p>
</form>
</body>
</html>