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 相关文章推荐
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
详解JavaScript常量定义
Jan 03 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python+django实现简单的文件上传
2016/08/17 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python 把列表转化为字符串的方法
2018/10/23 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
幼儿园教师国培感言
2014/02/02 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
销售活动策划方案
2014/08/26 职场文书
葬礼主持词
2015/07/02 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis