您的位置：首页 > Web前端 > JavaScript

JavaScript练习——仿京东商城实现 多条件筛选

2011-06-25 16:37 411 查看
京东商城效果图：



自己实现的效果图：





实现代码如下：

CSS代码： 

*{		
	border:0;
	padding:0;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	}
	
#pinpai,#jiage,#chicun,#pingtai,#xianka{
	display:block;
	}

#main{
	width:500px;
	height:500px;
	}
	
.leibie{				
	font-size:14px;
	font-weight:400;
	}
	
.common{
	font-size:12px;
	margin-left:5px;
	margin-right:5px;		
	}
	
 #filter a{
	color:#666666;
	text-decoration:none;
	}
	
#filter a:hover{
	background-color:#4598d2;
	}

.bgColor{
	background-color:#4598d2;
	}




HTML代码： 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body onload="jiazai()">
	<div id="filter">
		<div id="pinpai">
			<span class="leibie"><strong>品牌：</strong></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">全部</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">惠普</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">海尔</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">微星</a></span>
		</div>
		<div id="jiage">
			<span class="leibie"><strong>价格：</strong></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">全部</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">1-2999</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">3000-3999</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">4000-4999</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">5000-5999</a></span>
		</div>
		<div id="chicun">
			<span class="leibie"><strong>尺寸：</strong></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">全部</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">8.9英寸及以下</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">11英寸</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">12英寸</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">13英寸</a></span>
		</div>
		<div id="pingtai">
			<span class="leibie"><strong>平台：</strong></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">全部</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">Inter平台</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">AMD平台</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">VIA平台</a></span>
		</div>
		<div id="xianka">
			<span class="leibie"><strong>显卡：</strong></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">全部</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">独立显卡</a></span>
			<span class="common"><a href="#" mce_href="#" onclick="aClick(event)">集成显卡</a></span>
		</div>
	</div>
</body>
</html>




JavaScript代码: 

//加载事件
function jiazai()
{
	var root = document.getElementById("filter").getElementsByTagName("div");//找错一共有多少行。
	for(var i = 0; i < root.length;i++)
	{
		var tagAs = root[i].getElementsByTagName("a");//每一行中由a标签构成的数组。
		tagAs[0].className = 'bgColor';
	}
}

//a标签的单击事件，改变背景颜色
function aClick(event)
{		
	var tag = event.srcElement || event.target;//找到单击被点击的元素
	var father = tag.parentNode;//找到最近的一个div标签
	while(father.nodeName != "DIV")//如果tag的父级标签不是div标签则继续往上找
	{
		father = father.parentNode;
	}
	var fatherID = father.id;//找到tag标签最近一个父级div标签的id		
	
	//将fatherID该div对象下面的所有a标签，将各个a标签的className属性清空
	for(var i = 0; i < document.getElementById(fatherID).getElementsByTagName("a").length;i++)
	{
		document.getElementById(fatherID).getElementsByTagName("a")[i].className = "";
	}
	
	//为事件源tag对象添加className样式
	tag.className = 'bgColor';

	alert(fe());
}

//遍历所有a标签，根据a标签的className不同来获取用户选中的类型
function fe()
{
	var result = ""//记录返回的条件
	var root = document.getElementById("filter").getElementsByTagName("a");//获取id为filter标签下面的所有a标签
	for(var i = 0; i < root.length;i++)
	{
		if(root[i].className == 'bgColor')
		{
			result += root[i].innerHTML;
		}
	}
	return result;
}




<！---End-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航