Jquery仿淘寶京東多條件篩選可自行結(jié)合ajax加載示例
更新時(shí)間:2013年08月28日 16:00:24 作者:
仿淘寶京東多條件篩選可自行結(jié)合ajax加載,使用Jquery簡單實(shí)現(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"));
})
//價(jià)格
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>價(jià)格范圍</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實(shí)現(xiàn)模仿淘寶購物車結(jié)算
- Android實(shí)現(xiàn)的仿淘寶購物車demo示例
- asp.net下使用jQuery.AutoComplete完成仿淘寶商品搜索自動完成功能(改進(jìn)了鍵盤上下選擇體驗(yàn))
- jQuery實(shí)戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
- Java實(shí)現(xiàn)仿淘寶滑動驗(yàn)證碼研究代碼詳解
- JavaScript實(shí)現(xiàn)仿淘寶商品購買數(shù)量的增減效果
- 仿淘寶首頁分類列表效果實(shí)現(xiàn)代碼
- Java仿淘寶首頁分類列表功能的示例代碼
相關(guān)文章
基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線考試倒計(jì)時(shí)
這篇文章主要介紹了基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線考試倒計(jì)時(shí)的方法和示例,有需要的小伙伴可以參考下2015-06-06jquery中郵箱地址 URL網(wǎng)站地址正則驗(yàn)證實(shí)例代碼
QQ網(wǎng)站有一個(gè)網(wǎng)站舉報(bào)的功能,看了一些js代碼覺得寫得很不錯(cuò),我就拿下來了,下面是一個(gè)email驗(yàn)證與url網(wǎng)址驗(yàn)證js代碼,分享給大家2013-09-09基于jquery的一個(gè)拖拽到指定區(qū)域內(nèi)的效果
這兩天一直在整這個(gè)拖拽的效果,既然學(xué)習(xí)就要把一個(gè)特效的各個(gè)方面考慮周全,這樣才學(xué)到真正的知識??刹?,又整理了一個(gè) 拖拽的特效。2011-09-09jquery簡單實(shí)現(xiàn)外部鏈接用新窗口打開的方法
這篇文章主要介紹了jquery簡單實(shí)現(xiàn)外部鏈接用新窗口打開的方法,涉及jQuery正則匹配http://開頭外部鏈接網(wǎng)址的相關(guān)技巧,需要的朋友可以參考下2015-05-05DropDownList實(shí)現(xiàn)可輸入可選擇(兩種版本可選)
本篇文章主要介紹了DropDownList實(shí)現(xiàn)可輸入可選擇的具體實(shí)現(xiàn)代碼,并附上兩種版本(js版本和jquery版本),可供大家選擇。有需要的朋友可以參考下2016-12-12jquery基礎(chǔ)知識第一講之認(rèn)識jquery
jquery基礎(chǔ)知識第一講之初次見面,對jquery有一個(gè)初步認(rèn)識,為之后的學(xué)習(xí)打下基礎(chǔ),感興趣的小伙伴們可以參考一下2016-03-03