jQuery商品筛选导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery商品筛选导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

HTML代码(index.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" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="css/lrtk.css" />
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        //选中filter下的所有a标签，为其添加hover方法，该方法有两个参数，分别是鼠标移上和移开所执行的函数。
        $("#filter a").hover(
            function () {
                $(this).addClass("seling");
            },
            function () {
                $(this).removeClass("seling");
            }
        );


        //选中filter下所有的dt标签，并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
        $("#filter dt+dd a").attr("class", "seled"); /*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)，
                                                      不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/       

        //为filter下的所有a标签添加单击事件
        $("#filter a").click(function () {
            $(this).parents("dl").children("dd").each(function () {
				//下面三种方式效果相同（第三种写法的内部就是调用了find()函数，所以，第二、三种方法是等价的。）
                //$(this).children("div").children("a").removeClass("seled");
				//$(this).find("a").removeClass("seled");
				$('a',this).removeClass("seled");
            });

            $(this).attr("class", "seled");

            alert(RetSelecteds()); //返回选中结果   弹出
        });
        alert(RetSelecteds()); //返回选中结果   弹出
    });

    function RetSelecteds() {
        var result = "";
        $("#filter a[class='seled']").each(function () {
            result += $(this).html()+"\n";
        });
        return result;
    }
</script>
</head>
<body>
<!-- 代码 开始 -->
	<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>
    <div style="clear:both"></div>
</body>
</html>

CSS代码(lrtk.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;}

附件:下载该文件资源,减少时间成本(增值服务)