zoukankan      html  css  js  c++  java
  • 尺寸品牌Jquery 仿淘宝京东多条件筛选 可自行结合ajax加载

    在写这篇文章之前,xxx已经写过了几篇关于改尺寸品牌主题的文章,想要了解的朋友可以去翻一下之前的文章

        每日一道理
    一个安静的夜晚,我独自一人,有些空虚,有些凄凉。坐在星空下,抬头仰望美丽天空,感觉真实却由虚幻,闪闪烁烁,似乎看来还有些跳动。美的一切总在瞬间,如同“海市蜃楼”般,也只是刹那间的一闪而过,当天空变得明亮,而这星星也早已一同退去……
    <%@ 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="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="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="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>

    文章结束给大家分享下程序员的一些笑话语录: 乔布斯:怎么样还是咱安全吧!黑客:你的浏览器支持国内网银吗?苹果可以玩国内的网游吗乔布斯:......不可以黑客:那我研究你的漏洞干嘛,我也需要买奶粉!

  • 相关阅读:
    RabbitMQ消息队列———安装(一)
    Tornado之自定义异步非阻塞的服务器和客户端
    爬虫之解析微信的网页版(分析后台,不分析前端)
    阻塞I/O、非阻塞I/O和I/O多路复用
    Git之安装管理
    MongoDB下载以及安装
    Python3学习笔记(十六):随机数模块random
    Python3学习笔记(十五):常用时间模块time和datetime
    Python3学习笔记(十四):可迭代对象、迭代器和生成器
    unittest详解(七) 自动生成测试报告
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3085857.html
Copyright © 2011-2022 走看看