您的位置：首页 > Web前端 > JQuery
网店常用的商品属性选择功能(JQuery)

2011-11-24 14:54 495 查看
<head>
<title>网店常用的商品属性选择功能</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script src="../js/jquery.js" type="text/javascript"></script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
background-color: #FFF;
color: #000;
text-align: center;
font: normal 12px Arial,Helvetica,sans-serif;
}
ul, li
{
list-style-type: none;
}
img
{
border: 0;
}
h1, h2, h3, h4, h5, h6, div, p, li, td, th
{
text-align: left;
}
a:link, a:visited, a:hover
{
text-decoration: none;
color: #000;
padding: 3px;
}
a:hover
{
text-decoration: underline;
background-color: #F1F1F1;
color: #C80000;
}
.md
{
margin: 10px auto;
width: 96%;
padding: 5px;
border: 1px solid #c1c1c1;
overflow: hidden;
}
.hd, .bd
{
margin: 0 auto;
width: 100%;
overflow: hidden;
height: 34px;
}
.hd
{
height: 30px;
line-height: 30px;
background-color: #F1F1F1;
overflow: hidden;
}
.hd h2
{
float: left;
font-size: 14px;
text-indent: 10px;
}
.hd span
{
float: left;
margin-right: 5px;
margin-top: 3px;
display: inline;
height: 16px;
line-height: 16px;
padding: 3px;
border: 1px solid #ccc;
}
.bd h3
{
float: left;
width: 60px;
font-size: 12px;
text-align: right;
padding: 5px 0;
height: 24px;
line-height: 24px;
overflow: hidden;
}
.bd ul
{
float: left;
width: 530px;
overflow: hidden;
padding: 5px 0;
}
.bd li
{
float: left;
height: 24px;
line-height: 24px;
padding-right: 10px;
overflow: hidden;
}
.addBackgroundcolor
{
background-color: gray;
}
</style>
<script type="text/javascript">
var str = "";
$(document).ready(function () {
var Items = new Array("SizeDiv", "ColorDiv", "PrizeDiv");
for (var j = 0; j < Items.length; j++) {
$("#" + Items[j]).find("a").each(function () {
var yy = "#" + Items[j];
$(this).click(function () {
choiseGoodsType($(this), yy);
});
});
}
});
function choiseGoodsType(Name, div) {
$(div).find("a").each(function (i) {
if ($(Name).attr("id").split('_')[1] == "NOT") {
$(div).find("a").removeClass("addBackgroundcolor");
} else {
if ($(this).text() == $(Name).text()) {
$(Name).addClass("addBackgroundcolor");

} else {
$(this).removeClass("addBackgroundcolor");
}
}
document.getElementById("FootDiv").innerHTML = "";
document.getElementById("FootDiv").innerHTML = ArrayStr($(Name).text(), div);
});
}
function ArrayStr(name, div) {

str = "";
document.getElementById("FootDiv").innerHTML = "";
var NameType = "";
$("li .addBackgroundcolor").each(function () {
if ($(this).attr("id") == "SD") {
NameType = "[尺寸]:";
} else if ($(this).attr("id") == "CD") {
NameType = "[颜色]:";
}
else if ($(this).attr("id") == "PD") {
NameType = "[价格]:";
}
str += "<li><span style='font-wight:bold;color:green'>" + NameType + "</span>" + $(this).text() + ":" + "</li>";
});
return str;

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="md" id="select">
<h4>
您筛选的条件是：</h4>
<div id="FootDiv" class="bd ul">
</div>
<div class="bd">
<h3 id="size">
尺寸：</h3>
<ul id="SizeDiv">
<li><a href="#S" id="SD">S(小号)</a></li>
<li><a href="#M" id="SD">M(中号)</a></li>
<li><a href="#L" id="SD">L(大号)</a></li>
<li><a href="#XL" id="SD">XL(加大号)</a></li>
<li><a href="#XXL" id="SD">XXL(加加大号)</a></li>
<li><a href="#Not" id="SD_NOT">无尺寸限制</a></li>
</ul>
</div>
<div class="bd">
<h3 id="color">
颜色：</h3>
<ul id="ColorDiv">
<li><a href="#white" id="CD">白色</a></li>
<li><a href="#black" id="CD">黑色</a></li>
<li><a href="#red" id="CD">红色</a></li>
<li><a href="#yellow" id="CD">黄色</a></li>
<li><a href="#orange" id="CD">橙色</a></li>
<li><a href="#blue" id="CD">蓝色</a></li>
<li><a href="#Not" id="CD_NOT">无颜色限制</a></li>
</ul>
</div>
<div class="bd">
<h3 id="prize">
价格：</h3>
<ul id="PrizeDiv">
<li><a href="#50" id="PD">50</a></li>
<li><a href="#50-100" id="PD">51-100</a></li>
<li><a href="#101-200" id="PD">101-200</a></li>
<li><a href="#201-300" id="PD">201-300</a></li>
<li><a href="#301-400" id="PD">301-400</a></li>
<li><a href="#401" id="PD">400以上</a></li>
<li><a href="#Not" id="PD_NOT">无价格限制</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航