jquery實(shí)用的分類條件篩選列表,點(diǎn)選中分類菜單時高亮顯示,支持多級分類篩選插件。適用于商品分類篩選代碼。js css 結(jié)構(gòu)分離,結(jié)構(gòu)清晰,下載即可使用。
使用方法:
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="家電數(shù)碼" name="mode" class="default">家電數(shù)碼</a>
<a href="#" rel="英文外貿(mào)" name="mode" class="default">英文外貿(mào)</a>
<a href="#" rel="綜合通用" name="mode" class="default">綜合通用</a>
<a href="#" rel="食品保健" name="mode" class="default">食品保健</a>
<a href="#" rel="團(tuán)購模板" name="mode" class="default">團(tuán)購模板</a>
<a href="#" rel="美容護(hù)膚" name="mode" class="default">美容護(hù)膚</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="節(jié)日慶典" name="theme" class="default">節(jié)日慶典</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="藍(lán)色" name="system" class="default">藍(lán)色</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", //所有默認(rèn)
over : 'on', //當(dāng)前選中
all : ".all" // 默認(rèn)全部
});
})
</script>