Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "JquerySort.aspx.cs" inherits= "Demo_jquerysort"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery Classification </title>
<script src= ". /scripts/jquery-1.4.4.min.js "type=" Text/javascript "></script>
<script type= "Text/javascript" >
$ (function () {
Brand
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"));
})
Price
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"));
})
Size
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>
<body>
<form id= "Form1" runat= "Server" >
<div>
<table>
<tr id= "LINKTYPE01" >
<TD style= "width:100px" >
<b> Notebook Brand </b>
</td>
<td>
<span class= ' templinkactive ' tag= ' 0 ' > No limit </span>
</td>
<td>
<span class= ' templink ' tag= "100101" > Lenovo (Lenovo) </span>
</td>
<td>
<span class= ' templink ' tag= "100102" > Acer (ACER) </span>
</td>
<td>
<span class= ' templink ' tag= ' 100103 ' > Asus (ASUS) </span>
</td>
<td>
<span class= ' templink ' tag= ' 100104 ' > Dell (Dell) </span>
</td>
<td>
<span class= ' templink ' tag= ' 100105 ' > Apple (AAPL) </span>
</td>
<td>
<span class= ' templink ' tag= "100106" > Samsung (Samsung) </span>
</td>
</tr>
<tr id= "LINKTYPE02" >
<TD style= "width:100px" >
<b> Price Range </b>
</td>
<td>
<span class= ' templinkactive ' tag= ' 0 ' > No limit </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 and above </span>
</td>
</tr>
<tr id= "Linktype03" >
<TD style= "width:100px" >
<b> Dimension Range </b>
</td>
<td>
<span class= ' templinkactive ' tag= ' 0 ' > No limit </span>
</td>
<td>
<span class= ' templink ' tag= ' 100301 ' >8.9 inches and below </span>
</td>
<td>
<span class= ' templink ' tag= ' 100302 ' >11 inch </span>
</td>
<td>
<span class= ' templink ' tag= ' 100303 ' >12 inch </span>
</td>
<td>
<span class= ' templink ' tag= ' 100304 ' >13 inch </span>
</td>
<td>
<span class= ' templink ' tag= ' 100305 ' >14 inch </span>
</td>
<td>
<span class= ' templink ' tag= ' 100306 ' >15 inches and above </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>
</div>
</form>
</body>