Jquery 仿淘宝京东多条件筛选 可自行结合ajax加载

代码如下:

  1. <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”JquerySort.aspx.cs” Inherits=”demo_JquerySort” %>
  2. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  3. <html xmlns=”http://www.w3.org/1999/xhtml”>
  4. <head runat=”server”>
  5.     <title>Jquery分类</title>
  6.     <script src=”../Scripts/jquery-1.4.4.min.js” type=”text/javascript”></script>
  7.     <script type=”text/javascript”>
  8.         $(function () {
  9.             //品牌
  10.             var alink01 = $(“#linktype01”).find(“span”);
  11.             alink01.click(function () {
  12.                 alink01.each(function () {
  13.                     $(this).removeClass(“templinkactive”).addClass(“templink”);
  14.                 });
  15.                 $(this).removeClass(“templink”).addClass(“templinkactive”);
  16.                 $(“#Brand”).val($(this).attr(“tag”));
  17.             })
  18.             //价格
  19.             var alink02 = $(“#linktype02”).find(“span”);
  20.             alink02.click(function () {
  21.                 alink02.each(function () {
  22.                     $(this).removeClass(“templinkactive”).addClass(“templink”);
  23.                 });
  24.                 $(this).removeClass(“templink”).addClass(“templinkactive”);
  25.                 $(“#Price”).val($(this).attr(“tag”));
  26.             })
  27.             //尺寸
  28.             var alink03 = $(“#linktype03”).find(“span”);
  29.             alink03.click(function () {
  30.                 alink03.each(function () {
  31.                     $(this).removeClass(“templinkactive”).addClass(“templink”);
  32.                 });
  33.                 $(this).removeClass(“templink”).addClass(“templinkactive”);
  34.                 $(“#Size”).val($(this).attr(“tag”));
  35.                 SetPara();
  36.             })
  37.         });
  38.         function SetPara() {
  39.             var a = $(“#Brand”).val();
  40.             var b = $(“#Price”).val();
  41.             var c = $(“#Size”).val();
  42.             alert(“1.aspx?a=” + a + “&b=” + b + “&c=” + c);
  43.         };
  44.     </script>
  45.     <style type=”text/css”>
  46.         .templinkactive
  47.         {
  48.             padding:5px;
  49.             text-decoration:none;
  50.             background-color:  #2788DA;
  51.             color:#ffffff;
  52.         }
  53.         .templink
  54.         {
  55.             cursor:pointer;
  56.             padding:5px;
  57.             text-decoration:none;
  58.         }
  59.         table tr{ height:35px;}
  60.     </style>
  61. </head>
  62. <body>
  63.     <form id=”form1″ runat=”server”>
  64.     <div>
  65.         <table>
  66.             <tr id=”linktype01″>
  67.                 <td style=”width:100px”>
  68.                     <b>笔记本品牌</b>
  69.                 </td>
  70.                 <td>
  71.                     <span class=’templinkactive’ tag=”0″>不限</span>
  72.                 </td>
  73.                 <td>
  74.                     <span class=’templink’ tag=”100101″>联想(Lenovo)</span>
  75.                 </td>
  76.                 <td>
  77.                     <span class=’templink’ tag=”100102″>宏碁(Acer)</span>
  78.                 </td>
  79.                 <td>
  80.                     <span class=’templink’ tag=”100103″>华硕(ASUS)</span>
  81.                 </td>
  82.                 <td>
  83.                     <span class=’templink’ tag=”100104″>戴尔(DELL)</span>
  84.                 </td>
  85.                 <td>
  86.                     <span class=’templink’ tag=”100105″>苹果(Apple)</span>
  87.                 </td>
  88.                 <td>
  89.                     <span class=’templink’ tag=”100106″>三星 (SAMSUNG)</span>
  90.                 </td>
  91.             </tr>
  92.             <tr id=”linktype02″>
  93.                 <td style=”width:100px”>
  94.                     <b>价格范围</b>
  95.                 </td>
  96.                 <td>
  97.                     <span class=’templinkactive’ tag=”0″>不限</span>
  98.                 </td>
  99.                 <td>
  100.                     <span class=’templink’ tag=”100201″>1000-2999</span>
  101.                 </td>
  102.                 <td>
  103.                     <span class=’templink’ tag=”100202″>3000-3499</span>
  104.                 </td>
  105.                 <td>
  106.                     <span class=’templink’ tag=”100203″>4000-4499</span>
  107.                 </td>
  108.                 <td>
  109.                     <span class=’templink’ tag=”100204″>5000-5999</span>
  110.                 </td>
  111.                 <td>
  112.                     <span class=’templink’ tag=”100205″>6000-6999</span>
  113.                 </td>
  114.                 <td>
  115.                     <span class=’templink’ tag=”100206″>7000及以上</span>
  116.                 </td>
  117.             </tr>
  118.             <tr id=”linktype03″>
  119.                 <td style=”width:100px”>
  120.                     <b>尺寸范围</b>
  121.                 </td>
  122.                 <td>
  123.                     <span class=’templinkactive’ tag=”0″ >不限</span>
  124.                 </td>
  125.                 <td>
  126.                     <span class=’templink’ tag=”100301″>8.9英寸及以下</span>
  127.                 </td>
  128.                 <td>
  129.                     <span class=’templink’ tag=”100302″>11英寸</span>
  130.                 </td>
  131.                 <td>
  132.                     <span class=’templink’ tag=”100303″>12英寸</span>
  133.                 </td>
  134.                 <td>
  135.                     <span class=’templink’ tag=”100304″>13英寸</span>
  136.                 </td>
  137.                 <td>
  138.                     <span class=’templink’ tag=”100305″>14英寸</span>
  139.                 </td>
  140.                 <td>
  141.                     <span class=’templink’ tag=”100306″>15英寸及以上</span>
  142.                     <input type=”hidden” id=”Brand” value=”0″ />
  143.                     <input type=”hidden” id=”Price” value=”0″ />
  144.                     <input type=”hidden” id=”Size” value=”0″ />
  145.                 </td>
  146.             </tr>
  147.         </table>
  148.     </div>
  149.     </form>
  150. </body>
  151. </html>

标签