Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

 更新时间:2013年08月28日 16:00:24   作者:   我要评论
仿淘宝京东多条件筛选可自行结合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实现日历签到功能

    基于jquery实现日历签到功能

    这篇文章主要介绍了基于jquery实现日历签到功能,我们在玩游戏的时候或者登录某手机软件时都会有一个签到功能,记录大家的登录日期,这个日历签到如何实现?本文为大家进行揭晓。
    2015-11-11
  • passwordStrength 基于jquery的密码强度检测代码使用介绍

    passwordStrength 基于jquery的密码强度检测代码使用介绍

    我们设定密码强度等级为10,制作一张图片表示每个等级状态,给密码框绑定keyup事件,通过keyup事件获取密码值,然后使用正则进行判断密码强度等级,然后变换相应的图片
    2011-10-10
  • jquery.post用法之type设置问题

    jquery.post用法之type设置问题

    这篇文章主要介绍了jquery.post用法之type设置问题,需要的朋友可以参考下
    2014-02-02
  • jQuery - css() 方法示例详解

    jQuery - css() 方法示例详解

    css()方法设置或返回被选元素的一个或多个样式属性,下面有几个不错的示例,大家可以感受下
    2014-01-01
  • JQuery实现动态表格点击按钮表格增加一行

    JQuery实现动态表格点击按钮表格增加一行

    动态表格,功能为点击添加按钮,表格增加一行并给其name属性赋予的值,点击删除,自动删除这一行,具体实现如下
    2014-08-08
  • jquery解决客户端跨域访问问题

    jquery解决客户端跨域访问问题

    这篇文章主要介绍了jquery解决客户端跨域访问问题,jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的,需要的朋友可以参考下
    2015-01-01
  • 文件上传的几个示例分享【推荐】

    文件上传的几个示例分享【推荐】

    本篇文章主要分享的是几个上传文件的例子和逻辑步奏及自定义个简单的js上传插件。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • jQuery实现的登录浮动框效果代码

    jQuery实现的登录浮动框效果代码

    这篇文章主要介绍了jQuery实现的登录浮动框效果代码,点击登陆链接可弹出悬浮登录框,涉及jQuery中show与hide方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法

    jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法

    这篇文章主要介绍了 jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法的相关资料,需要的朋友可以参考下
    2016-02-02
  • jQuery基础知识小结

    jQuery基础知识小结

    本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结,非常的详尽,推荐给有需要的小伙伴。
    2014-12-12

最新评论