Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
来源：互联网 发布：mac用qq截图 编辑：程序博客网 时间：2024/06/06 13:06
仿淘宝京东多条件筛选可自行结合ajax加载，使用Jquery简单实现，具体如下，喜欢的朋友可以参考
复制代码代码如下:
<%@ 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>
- Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
- Jquery 仿淘宝京东多条件筛选 可自行结合ajax加载
- Jquery 仿淘宝京东多条件筛选 可自行结合ajax加载
- 淘宝按条件筛选
- 仿淘宝筛选模块功能
- jQuery列表多条件商品查询(仿淘宝)
- 基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)
- jquery多条件商品筛选
- 仿淘宝图片空间 点击文字 出现可编辑文本框 提交ajax数据到后台修改
- jQuery仿淘宝图片移动
- Jquery仿淘宝购物车
- js结合jquery实现的ajax瀑布流加载实例
- 简单仿jQuery Ajax
- jquery 结合ajax例子
- 类似淘宝的多规格条件筛选查询
- JQUERY手机商城各个分类商品条件筛选
- android 仿淘宝的加载刷新效果
- jQuery实现仿淘宝下拉菜单
- 解析 Linux 内核可装载模块的版本检查机制
- SQL Server 2008R2编写脚本时智能提示功能丢失的处理
- Hibernate基础之核心接口
- jquery的使用
- jquery 判断某元素是否具备指定的样式
- Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
- ubuntu13.10 编译时 关于链接xlib 库阶段出错的问题解决
- C++存储数据结构之map
- 介绍的比较全面中国人最容易懂的paxos
- Myelipse6.5 设置自动提示代码功能
- CentOS6.3安装JDK和环境配置
- Linux基础知识总结-概述和基本操作
- mysql安装与常用命令
- mac 系统下的音频转换命令
