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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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
You might like
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Python中使用logging模块打印log日志详解
2015/04/05 Python
python实现类的静态变量用法实例
2015/05/08 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
pytorch 数据集图片显示方法
2018/07/26 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
违反课堂纪律检讨书
2014/01/19 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技