仿京东的条件筛选功能(jquery)-转载
精选 转载<!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></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#filter a").hover(
function() {
$(this).addClass("seling");
},
function() {
$(this).removeClass("seling");
}
);
$("#filter dt+dd a").attr("class", "seled");
$("#filter a").click(function() {
$(this).parents("dl").children("dd").each(function() {
$('a', this).removeClass("seled");
});
$(this).attr("class", "seled");
alert(RetSelecteds());
});
});
function RetSelecteds() {
var result = "";
$("#filter a[class='seled']").each(function() {
result += $(this).html() + "\n";
});
return result;
}
</script>
<style type="text/css">
#filter
{
width:620px;
height:auto;
margin-left:auto;
margin-right:auto;
font-size:12px;
}
#filter dl
{
padding:0;
margin-top:0;
margin-bottom:0;
clear:both;
padding:4px 0;
}
#filter dt,dd
{
display:block;
float:left;
width:auto;
padding:0;
margin:3px 0;
}
#filter dt
{
height:14px;
padding-bottom:4px;
font-weight:bold;
color:#333333;
}
#filter dd
{
color:#005AA0;
margin-right:8px;
}
#filter a
{
cursor:pointer;
}
.seling
{
background-color:#005AA0;
color:#FFFFFF;
}
.seled
{
background-color:#005AA0;
color:#FFFFFF;
}
</style>
</head>
<body >
<form id="form1" runat="server">
<div id="filter">
<dl>
<dt>品牌:</dt>
<dd><div><a>全部</a></div></dd>
<dd><div><a>惠普(hp)</a></div></dd>
<dd><div><a>联想(Lenovo)</a></div></dd>
<dd><div><a>联想(ThinkPad)</a></div></dd>
<dd><div><a>宏基(acer)</a></div></dd>
<dd><div><a>华硕</a></div></dd>
<dd><div><a>戴尔</a></div></dd>
<dd><div><a>三星</a></div></dd>
<dd><div><a>索尼</a></div></dd>
<dd><div><a>东芝</a></div></dd>
<dd><div><a>Gateway</a></div></dd>
<dd><div><a>微星</a></div></dd>
<dd><div><a>海尔</a></div></dd>
<dd><div><a>清华同方</a></div></dd>
<dd><div><a>富士通</a></div></dd>
<dd><div><a>苹果(Apple)</a></div></dd>
<dd><div><a>神舟</a></div></dd>
<dd><div><a>方正</a></div></dd>
<dd><div><a>优雅</a></div></dd>
</dl>
<dl>
<dt>价格:</dt>
<dd><div><a>全部</a></div></dd>
<dd><div><a>1000-2999</a></div></dd>
<dd><div><a>3000-3499</a></div></dd>
<dd><div><a>3500-3999</a></div></dd>
<dd><div><a>4000-4499</a></div></dd>
<dd><div><a>4500-4999</a></div></dd>
<dd><div><a>5000-5999</a></div></dd>
<dd><div><a>6000-6999</a></div></dd>
<dd><div><a>7000-9999</a></div></dd>
<dd><div><a>10000以上</a></div></dd>
</dl>
<dl>
<dt>尺寸:</dt>
<dd><div><a>全部</a></div></dd>
<dd><div><a>8.9英寸及以下</a></div></dd>
<dd><div><a>11英寸</a></div></dd>
<dd><div><a>12英寸</a></div></dd>
<dd><div><a>13英寸</a></div></dd>
<dd><div><a>14英寸</a></div></dd>
<dd><div><a>15英寸</a></div></dd>
<dd><div><a>16英寸-17英寸</a></div></dd>
</dl>
<dl>
<dt>平台:</dt>
<dd><div><a>全部</a></div></dd>
<dd><div><a>AMD Brazos APU平台</a></div></dd>
<dd><div><a>Intel Sandy Bridge平台</a></div></dd>
<dd><div><a>Intel平台</a></div></dd>
<dd><div><a>AMD平台</a></div></dd>
</dl>
<dl>
<dt>显卡:</dt>
<dd><div><a>全部</a></div></dd>
<dd><div><a>独立显卡</a></div></dd>
<dd><div><a>集成显卡</a></div></dd>
<dd><div><a>核芯显卡</a></div></dd>
</dl>
</div>
</form>
</body>
</html>
下一篇:js如何获取url的参数

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
仿京东短信验证码UI效果(鸿蒙)
仿京东短信验证码UI效果(鸿蒙)
鸿蒙 HarmonyOS ArkTS -
Android 倒计时 仿京东
效果xml<LinearLayout android:layout_width="wrap_content" android:layout_heig
CountDownTimer 倒计时 Android 倒计时 android xml -
ElasticSearch实战(仿京东商城搜索)
ElasticSearch目录文章目录七、ElasticSearch实战(仿京东商城搜索)7.1、项目整体概法2、ContentController增加入口3、测试7.7、问题:1、使用
elasticsearch java 分布式 es仿京东商城搜索 spring -
HTML期末大作业~仿京东首页制作海贼王动漫HTML网页(HTML+CSS+JavaScript)
HTML期末大作业~京东首页仿制作海贼王动漫HTML网页(HTML+CSS+JavaScript)这次网页主要以(HTML+CSS+JavaScript)制作海贼王动漫商城 , 通过这些可以大概了解这部漫画的内容和他为何如此吸引人的原因 在漫画赏析中我们可以大概看到一些漫画精选!网页制作介绍(欢迎来到新世界,一起航海吧!)关于海贼王动漫的HTML网页制作,,大作业A+水平!!主要特色:京东首页仿制作海贼王动漫HTML网页制作~作为第一次遇到html期末大作业,熬夜了好几天才做了个大概所以想纪念一下,
仿京东商城HTML 仿京东制作海贼王HTML Javascript期末大作业 HTML期末大作业 动漫静态网页HTML