编程 Javascript

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

Posted in Javascript onAugust 28, 2013

<%@ 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"> 
<html xmlns="http://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"> 
<div> 
<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> 
</div> 
</form> 
</body> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery maxlength使用说明

Sep 09 Javascript

javascript判断iphone/android手机横竖屏模式的函数

Dec 20 Javascript

jQuery UI Autocomplete 体验分享

Feb 14 Javascript

JS检测图片大小的实例

Aug 21 Javascript

jquery实现无限分级横向导航菜单的方法

Mar 12 Javascript

JS获取Table中td值的方法

Mar 19 Javascript

JavaScript中的Math.E属性使用详解

Jun 12 Javascript

json对象转为字符串,当做参数传递时加密解密的实现方法

Jun 29 Javascript

Bootstrap表单使用方法详解

Feb 17 Javascript

JavaScript实现一个带AI的井字棋游戏源码

May 21 Javascript

VeeValidate 的使用场景以及配置详解

Jan 11 Javascript

React+Redux实现简单的待办事项列表ToDoList

Sep 29 Javascript

Jquery Uploadify多文件上传带进度条且传递自己的参数

Aug 28 #Javascript

ExtJS DOM元素操作经验分享

Aug 28 #Javascript

地址栏传递中文参数乱码在js里用escape转码

Aug 28 #Javascript

在JavaScript中实现类的方式探讨

Aug 28 #Javascript

实用的Jquery选项卡TAB示例代码

Aug 28 #Javascript

jQuery实现图片信息的浮动显示实例代码

Aug 28 #Javascript

JQuery筛选器全系列介绍

Aug 27 #Javascript