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 apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
JS实现canvas简单小画板功能
Jun 23 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
前端如何实现动画过渡效果
Feb 05 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 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php提交post数组参数实例分析
2015/12/17 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
美工的岗位职责
2013/11/14 职场文书
应付会计岗位职责
2013/12/12 职场文书
购房协议书范本
2014/10/02 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python