利用jquery实现鼠标点击商品分类筛选代码

利用jquery实现鼠标点击商品分类筛选代码
特效描述:利用jquery实现 鼠标点击 商品分类筛选,利用jquery实现鼠标点击商品分类筛选代码

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/shanxuan.js"></script>

2. HTML代码

<div class="demo">
	<div class="sx">
		<span>分类1:</span>
		<a rel="1" class="sx_child" name="aaa" href="javascript:;">1111</a>
		<a rel="2" class="sx_child" name="aaa" href="javascript:;">2222</a>
		<a rel="3" class="sx_child" name="aaa" href="javascript:;">3333</a>
		<a rel="4" class="sx_child" name="aaa" href="javascript:;">4444</a>
	</div>
	<div class="sx">
		<span>分类2:</span>
		<a rel="1" class="sx_child" name="bbb" href="javascript:;">aaaa</a>
		<a rel="2" class="sx_child" name="bbb" href="javascript:;">bbbb</a>
		<a rel="3" class="sx_child" name="bbb" href="javascript:;">cccc</a>
		<a rel="4" class="sx_child" name="bbb" href="javascript:;">dddd</a>
	</div>
	<div class="sx">
		<span>分类3:</span>
		<a rel="1" class="sx_child" name="ccc" href="javascript:;">一一</a>
		<a rel="2" class="sx_child" name="ccc" href="javascript:;">二二</a>
		<a rel="3" class="sx_child" name="ccc" href="javascript:;">三三</a>
		<a rel="4" class="sx_child" name="ccc" href="javascript:;">四四</a>
	</div>
	<div class="sx">
		<span>分类4:</span>
		<a rel="1" class="sx_child" name="ddd" href="javascript:;">ⅠⅠ</a>
		<a rel="2" class="sx_child" name="ddd" href="javascript:;">ⅡⅡ</a>
		<a rel="3" class="sx_child" name="ddd" href="javascript:;">ⅢⅢ</a>
		<a rel="4" class="sx_child" name="ddd" href="javascript:;">ⅣⅣ</a>
	</div>
	<div class="zj">
		<span>删选结果:</span>
		<p class="qcqb">清除全部</p>
	</div>
</div>
<script type="text/javascript">
$('.sx').sx({
	nuv:".zj",//筛选结果
	zi:"sx_child",//所有筛选范围内的子类
	qingchu:'.qcqb',//清除全部
	over:'on'//选中状态样式名称
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到