jquery分类菜单列表筛选插件

jquery实用的分类条件筛选列表，点选中分类菜单时高亮显示，支持多级分类筛选插件。适用于商品分类筛选代码。js css 结构分离，结构清晰，下载即可使用。

使用方法：

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/current.js"></script>

3、body引入HTML代码

<div class="cation-content">
	<div class="cation-middle">
		<dl class="cation-list">
			<dt>分类</dt>
			<dd>
				<a href="#" rel="" name="mode" class="all on">全部</a>
				<a href="#" rel="服装鞋包" name="mode" class="default">服装鞋包</a>
				<a href="#" rel="家电数码" name="mode" class="default">家电数码</a>
				<a href="#" rel="英文外贸" name="mode" class="default">英文外贸</a>
				<a href="#" rel="综合通用" name="mode" class="default">综合通用</a>
				<a href="#" rel="食品保健" name="mode" class="default">食品保健</a>
				<a href="#" rel="团购模板" name="mode" class="default">团购模板</a>
				<a href="#" rel="美容护肤" name="mode" class="default">美容护肤</a>
				<a href="#" rel="珠宝饰品" name="mode" class="default">珠宝饰品</a>
				<a href="#" rel="鲜花礼品" name="mode" class="default">鲜花礼品</a>
				<a href="#" rel="童装母婴" name="mode" class="default">童装母婴</a>
			</dd>
		</dl>
		<dl class="cation-list">
			<dt>主题</dt>
			<dd>
				<a href="#" rel="" name="theme" class="all on">全部</a>
				<a href="#" rel="古典雅致" name="theme" class="default">古典雅致</a>
				<a href="#" rel="可爱温馨" name="theme" class="default">可爱温馨</a>
				<a href="#" rel="时尚简约" name="theme" class="default">时尚简约</a>
				<a href="#" rel="潮流酷炫" name="theme" class="default">潮流酷炫</a>
				<a href="#" rel="节日庆典" name="theme" class="default">节日庆典</a>
			</dd>
		</dl>
		<dl class="cation-list">
			<dt>色系</dt>
			<dd>
				<a href="#" rel="" name="system" class="all on">全部</a>
				<a href="#" rel="多彩" name="system" class="default">多彩</a>
				<a href="#" rel="橙色" name="system" class="default">橙色</a>
				<a href="#" rel="粉色" name="system" class="default">粉色</a>
				<a href="#" rel="红色" name="system" class="default">红色</a>
				<a href="#" rel="绿色" name="system" class="default">绿色</a>
				<a href="#" rel="蓝色" name="system" class="default">蓝色</a>
				<a href="#" rel="黑色" name="system" class="default">黑色</a>
			</dd>
		</dl>
		<dl class="cation-list">
			<dt>价格</dt>
			<dd>
				<a href="#" rel="" name="price" class="all on">全部</a>
				<a href="#" rel="2000 - 6000" name="price" class="default">2000 - 6000</a>
				<a href="#" rel="6000 - 10000" name="price" class="default">6000 - 10000 </a>
				<a href="#" rel="10000 - 14000" name="price" class="default">10000 - 14000 </a>
				<a href="#" rel="18000 - 22000" name="price" class="default">18000 - 22000</a>
				<a href="#" rel="26000 - 30000" name="price" class="default">26000 - 30000</a>
			</dd>
		</dl>
	</div>
</div>


<script type="text/javascript">
	$(function(){
		new SelectTag({
			child : ".default", //所有默认
			over : 'on', //当前选中
			all : ".all" // 默认全部
		});
	})
</script>

使用声明

1. 本站所有素材（未指定商用），仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后，只拥有使用权，著作权归原作者及17素材网所有。
3. 原创商用和VIP素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途，织梦系统商业用途请预先授权。

查看演示下载资源

0 13672 57

软件 Dreamweaver
格式 HTML
作者歪秀
版权 © 原创商用（独家） i

版权声明

此作品是由17素材网签约用户上传，17素材网拥有版权；未经17素材网书面授权，请勿作他用。人物肖像，字体及音频如需商用需第三方额外授权；

17素材网尊重知识产权，如知识产权权利人认为平台内容涉嫌侵权，可通过邮件：3264130392@qq.com提出书面通知，我们将及时处理。

网站提供的党政主题相关内容（国旗、国徽、党徽...），目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。