Jquery仿淘寶京東多條件篩選可自行結合ajax載入範例_jquery

複製程式碼 程式碼如下:

/ /W3C//DTD XHTML 1.0 過渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >






$(function () {
//品牌
var alink01 = $("#linktype01").find("span");
alink01.click(function () {
alink01.each(function () {
$(this). removeClass ("templinkactive").addClass("templink")
$(this).removeClass("templink"); .addClass("templinkactive"); ).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"); ).val($(this).attr("標籤"));
})

//
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);
}；
腳本>

.templinkactive
{
padding:5px;
文字裝飾：無;
背景顏色：#2788DA；
顏色：#ffffff;
}
.templink
{
頭部：鏟；
內邊距：5px;
文字裝飾：無；
}
表tr{ height: 35px ;}
風格>
頭>

;
;


筆電品牌


不限


聯想（Lenovo）


宏碁（Acer）;


華碩（ASUS）;


戴爾（DELL）


蘋果（Apple）


三星（SAMSUNG）;




價格範圍


不限


1000-2999


3000-3499


4000-4499;


5000-5999


6000-6999;


7000以上




尺寸範圍


不限


8.9吋以下


11 吋


12 吋


13 吋


14 吋


15吋以上
>
>
>


表>

表格>
身體>