Jquery仿淘寶京東多條件篩選可自行結(jié)合ajax加載示例
更新時間：2013年08月28日 16:00:24 作者：
仿淘寶京東多條件篩選可自行結(jié)合ajax加載，使用Jquery簡單實現(xiàn)，具體如下，喜歡的朋友可以參考下
復(fù)制代碼 代碼如下:
<%@ 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">聯(lián)想（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插件開發(fā)之圖片放大鏡效果(仿淘寶)
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- 純jquery實現(xiàn)模仿淘寶購物車結(jié)算
- Android實現(xiàn)的仿淘寶購物車demo示例
- asp.net下使用jQuery.AutoComplete完成仿淘寶商品搜索自動完成功能(改進(jìn)了鍵盤上下選擇體驗)
- jQuery實戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
- Java實現(xiàn)仿淘寶滑動驗證碼研究代碼詳解
- JavaScript實現(xiàn)仿淘寶商品購買數(shù)量的增減效果
- 仿淘寶首頁分類列表效果實現(xiàn)代碼
- Java仿淘寶首頁分類列表功能的示例代碼
相關(guān)文章
JQuery實現(xiàn)table中tr上移下移的示例(超簡單)
下面小編就為大家分享一篇JQuery實現(xiàn)table中tr上移下移的示例(超簡單)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JQuery的read函數(shù)與js的onload不同方式實現(xiàn)
JQuery的read函數(shù)與js的onload，想必大家對這兩個方法都有所熟悉吧，接下來介紹一個實例用以上兩種方法各自實現(xiàn)，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
這篇文章主要介紹了jQuery實現(xiàn)防止提交按鈕被雙擊的方法,涉及jQuery針對鼠標(biāo)按鍵的操作技巧以及preventDefault方法對元素默認(rèn)行為的修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery 1.5.1 發(fā)布，全面支持IE9 修復(fù)大量bug
jQuery 1.5.1發(fā)布了！這是自jQuery1.5發(fā)布以來第一個小版本更新，并且解決了很多BUG。2011-02-02
這篇文章主要介紹了jQuery實現(xiàn)點擊圖片翻頁展示效果的方法,涉及jQuery操作圖片的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家介紹了如何利用JQuery實現(xiàn)相鄰item焦點移動的效果，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)前端知識有一定的幫助，感興趣的可以學(xué)習(xí)一下2022-04-04
解決jQuery uploadify在非IE核心瀏覽器下無法上傳
之前上傳了一個通過Flash實現(xiàn)多文件上傳，但是在IE正常運行，F(xiàn)ireFox 不能正常上傳。經(jīng)過反復(fù)研究學(xué)習(xí)，之所以firefox和360瀏覽器無法正常運行，是因為FireFox、chrome、360瀏覽器等支持HTML5的瀏覽器不會再文件上傳時自動帶入session信息和cookie，不共享session。2015-08-08
json數(shù)據(jù)是一種經(jīng)型的實時數(shù)據(jù)交互的數(shù)據(jù)存儲方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面我來給大家介紹jquery處理json數(shù)據(jù)方法。2014-06-06
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果。2011-08-08
jquery 禁止鼠標(biāo)右鍵并監(jiān)聽右鍵事件
本篇文章主要介紹了jquery禁止鼠標(biāo)右鍵并監(jiān)聽右鍵事件的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04