仿京东产品列表搜索

最新推荐文章于 2024-08-16 19:02:09 发布

iteye_9817

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量107

点赞数

文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/iteye_9817/article/details/82292820

版权




<!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" />  

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

<title>无标题文档</title>  

<style>

*{        

    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;  

    }  

</style>


<script language="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';  



    document.getElementById("dv").innerHTML=fe();  

}  



//遍历所有a标签，根据a标签的className不同来获取用户选中的类型  

function fe()  

{  

    var result = "";//记录返回的条件 

	var href="";

    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+"<br/>"+"链接为:"+root[i].href+"<br/>"; //换行显示 

        }  

    }  

    return result;  

}  

//-->

</script>

</head>  



<body onload="jiazai()">  

    <div id="filter">  

        <div id="pinpai">  

            <span class="leibie"><strong>品牌：</strong></span>  

            <span class="common"><a href="#all_1" mce_href="#" onclick="aClick(event)">全部</a></span>  

            <span class="common"><a href="#all_1_1" mce_href="#" onclick="aClick(event)">惠普</a></span>  

            <span class="common"><a href="#all_1_2" mce_href="#" onclick="aClick(event)">海尔</a></span>  

            <span class="common"><a href="#all_1_3" mce_href="#" onclick="aClick(event)">微星</a></span>  

        </div>  

        <div id="jiage">  

            <span class="leibie"><strong>价格：</strong></span>  

            <span class="common"><a href="#all_2" mce_href="#" onclick="aClick(event)">全部</a></span>  

            <span class="common"><a href="#all_2_1" mce_href="#" onclick="aClick(event)">1-2999</a></span>  

            <span class="common"><a href="#all_2_2" mce_href="#" onclick="aClick(event)">3000-3999</a></span>  

            <span class="common"><a href="#all_2_3" mce_href="#" onclick="aClick(event)">4000-4999</a></span>  

            <span class="common"><a href="#all_2_4" mce_href="#" onclick="aClick(event)">5000-5999</a></span>  

        </div>  

        <div id="chicun">  

            <span class="leibie"><strong>尺寸：</strong></span>  

            <span class="common"><a href="#all_3" mce_href="#" onclick="aClick(event)">全部</a></span>  

            <span class="common"><a href="#all_3_1" mce_href="#" onclick="aClick(event)">8.9英寸及以下</a></span>  

            <span class="common"><a href="#all_3_2" mce_href="#" onclick="aClick(event)">11英寸</a></span>  

            <span class="common"><a href="#all_3_3" mce_href="#" onclick="aClick(event)">12英寸</a></span>  

            <span class="common"><a href="#all_3_4" mce_href="#" onclick="aClick(event)">13英寸</a></span>  

        </div>  

        <div id="pingtai">  

            <span class="leibie"><strong>平台：</strong></span>  

            <span class="common"><a href="#all_4" mce_href="#" onclick="aClick(event)">全部</a></span>  

            <span class="common"><a href="#all_4_1" mce_href="#" onclick="aClick(event)">Inter平台</a></span>  

            <span class="common"><a href="#all_4_2" mce_href="#" onclick="aClick(event)">AMD平台</a></span>  

            <span class="common"><a href="#all_4_5" mce_href="#" onclick="aClick(event)">VIA平台</a></span>  

        </div>  

        <div id="xianka">  

            <span class="leibie"><strong>显卡：</strong></span>  

            <span class="common"><a href="#all_5" mce_href="#" onclick="aClick(event)">全部</a></span>  

            <span class="common"><a href="#all_5_1" mce_href="#" onclick="aClick(event)">独立显卡</a></span>  

            <span class="common"><a href="#all_5_2" mce_href="#" onclick="aClick(event)">集成显卡</a></span>  

        </div>  

    </div> 

	<p></p>

	<p></p>

	<p></p>

	<p></p>

	<p></p>

	<p></p>


	<div style="font:bold;color:black" align="center"><h1 id="dv"></h1></div>

</body>  

</html>