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
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
如何分别全角和半角以避免乱码
2006/10/09 PHP
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
js分页工具实例
2015/01/28 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
Bootstrap的modal拖动效果
2016/12/25 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
python解析xml文件实例分享
2013/12/04 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python中的asyncio代码详解
2019/06/10 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
公司法人授权委托书范本
2014/09/12 职场文书
综治维稳工作汇报
2014/10/27 职场文书
工作检讨书范文
2015/01/23 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript