文档章节

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

深圳大道
 深圳大道
发布于 2016/12/29 15:33
字数 520
阅读 11
收藏 0
<%@ 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>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/8939134

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.4K
10
jquery表格

新闻来源:noupe.com 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行...

长平狐
2012/10/16
386
1
jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

晨曦之光
2012/03/09
321
0
来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang
2018/05/24
0
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java的战争

本文来自微信公众号: 金捷幡(ID:jin-jiefan) ,作者:金捷幡,封面:拉里·埃里森(东方IC) 2019年5月,彻底撕破脸的特朗普掀起对华为的战争,谷歌被迫吊销了华为的Android授权。开源软...

Java领航员
41分钟前
1
0
超详细的LM3414MRX/NOPB规格参数介绍就在这里

超详细的LM3414MRX/NOPB规格参数介绍就在这里 描述 LM3414和LM3414MRX/NOPB是具有1-A 60 W(1)共阳极功能的恒流降压LED驱动器。它们适用于驱动单串3-W HBLED,效率高达96%。它们可接受4.5...

不能吃肉的仙女
47分钟前
1
0
Eclipse国内镜像源配置方法

Table of Contents 我们在国内从官网下载Eclipse以及插件非常慢,那么,有没有方法变快呢? 有,那就是使用国内的公开镜像源替换官方源。 1 下载Eclipse 首先,我们看一个链接地址: http:/...

求神
今天
7
0
java 请求服务

一.第一种基于java web http 请求服务,必须用tomcat 容器启动才能对外提供服务 在maven 工程中pox 文件导入jar <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>h......

zaolonglei
今天
5
0
HDFS工作机制——自开发分布式数据采集系统

需求描述: 在业务系统的服务器上,业务程序会不断生成业务日志(比如网站的页面访问日志) 业务日志是用log4j生成的,会不断地切出日志文件,需要定期(比如每小时)从业务服务器上的日志目...

须臾之余
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部