微信扫码登录 ×
vip素材 jQuery装修案例分类条件筛选代码
vip素材

jQuery装修案例分类条件筛选代码

收藏
jQuery装修案例分类条件筛选代码
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="60m²以下" name="mianji" class="default">60m²以下</a>
				<a href="#" rel="60-80m²" name="mianji" class="default">60-80m²</a>
				<a href="#" rel="100-120m²" name="mianji" class="default">100-120m²</a>
				<a href="#" rel="120-180m²" name="mianji" class="default">120-180m²</a>
				<a href="#" rel="180m²以上" name="mianji" class="default">180m²以上</a>
			</dd>
		</dl>
		<dl class="cation-list">
			<dt>预算</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>风格</dt>
			<dd>
				<a href="#" rel="" name="fengge" class="all on">不限</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="北欧" name="fengge" class="default">北欧</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>
			</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.00m²</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.00m²</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.00m²</span><span>9.80万</span></p>
			</li>
		</ul>
	</div>
</div>


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

使用声明

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

  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 小甜甜
  • 上传时间 6年前
x
×
×

注册

QQ注册 立即下载 微信注册 立即下载

签到成功!

已连续签到1天,连续签到3天可获得50积分

知道了