jQuery裝修案例分類條件篩選代碼

使用方法：

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代碼

<div class="cation-content">
	<div style="height:50px"></div>
	<!-- 可以刪除 -->

	<div class="cation-middle">
		<div class="crumbs">首頁 > 裝修案例</div>
		<dl class="cation-list">
			<dt>戶型</dt>
			<dd>
				<a href="#" rel="" name="huxing" class="all on">不限</a>
				<a href="#" rel="一居室" name="huxing" class="default">一居室</a>
				<a href="#" rel="二居室" name="huxing" class="default">二居室</a>
				<a href="#" rel="三居室" name="huxing" class="default">三居室</a>
				<a href="#" rel="四居室" name="huxing" class="default">四居室</a>
			</dd>
		</dl>
		<dl class="cation-list">
			<dt>面積</dt>
			<dd>
				<a href="#" rel="" name="mianji" class="all on">不限</a>
				<a href="#" rel="60m2以下" name="mianji" class="default">60m2以下</a>
				<a href="#" rel="60-80m2" name="mianji" class="default">60-80m2</a>
				<a href="#" rel="100-120m2" name="mianji" class="default">100-120m2</a>
				<a href="#" rel="120-180m2" name="mianji" class="default">120-180m2</a>
				<a href="#" rel="180m2以上" name="mianji" class="default">180m2以上</a>
			</dd>
		</dl>
		<dl class="cation-list">
			<dt>預(yù)算</dt>
			<dd>
				<a href="#" rel="" name="yusuan" class="all on">不限</a>
				<a href="#" rel="5萬以下" name="yusuan" class="default">5萬以下</a>
				<a href="#" rel="5-8萬" name="yusuan" class="default">5-8萬</a>
				<a href="#" rel="8-15萬" name="yusuan" class="default">8-15萬</a>
				<a href="#" rel="15萬以上" name="yusuan" class="default">15萬以上</a>
			</dd>
		</dl>
		<dl class="cation-list">
			<dt>風(fēng)格</dt>
			<dd>
				<a href="#" rel="" name="fengge" class="all on">不限</a>
				<a href="#" rel="現(xiàn)代簡約" name="fengge" class="default">現(xiàn)代簡約</a>
				<a href="#" rel="美式田園" name="fengge" class="default">美式田園</a>
				<a href="#" rel="新中式" name="fengge" class="default">新中式</a>
				<a href="#" rel="北歐" name="fengge" class="default">北歐</a>
				<a href="#" rel="工業(yè)" name="fengge" class="default">工業(yè)</a>
				<a href="#" rel="歐式" name="fengge" class="default">歐式</a>
				<a href="#" rel="其他" name="fengge" class="default">其他</a>
			</dd>
		</dl>
	</div>

	<div class="case_list">
		<ul>
			<li>
				<div class="img">
					<a href="javascript:;"><img src="statics/images/case.jpg" /></a>
				</div>
				<p>
					<a href="javascript:;">華潤幸福里</a><span>三居室</span><span>103.00m2</span><span>11.90萬</span></p>
			</li>
			<li>
				<div class="img">
					<a href="javascript:;"><img src="statics/images/case.jpg" /></a>
				</div>
				<p>
					<a href="javascript:;">中天悅府</a><span>二居室</span><span>95.00m2</span><span>9.80萬</span></p>
			</li>
			<li>
				<div class="img">
					<a href="javascript:;"><img src="statics/images/case.jpg" /></a>
				</div>
				<p>
					<a href="javascript:;">中天悅府</a><span>二居室</span><span>95.00m2</span><span>9.80萬</span></p>
			</li>
		</ul>
	</div>
</div>


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