QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery tab图片列表切换代码

原创商用 jQuery tab图片列表切换代码

jQuery图片选项卡切换,制作建站模板图片tab切换效果。这是一款大气的图片列表选项卡代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="template">
	
	<div class="title">1000+全行业模板  易操作的设计器</div>
	<div class="subtitle">省时省力,同时满足商家个性化搭建诉求</div>
	<div class="category">
		<ul>
			<li class="active">小程序模板</li>
			<li>微商城模板</li>
			<li>电脑商城模板</li>
		</ul>
	</div>
	<!--内容-->
	<div class="content xcx active">
		<ul>
			<li>
				<div class="img">
					<img src="statics/images/xcx.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/xcx2.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/xcx3.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/xcx4.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/xcx5.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/xcxEWM.png"/>
				</div>
			</li>
			
		</ul>
		<div class="more">
			<a href="#">查看更多</a>
		</div>
	</div>
	<div class="content wsc">
		<ul>
			<li>
				<div class="img">
					<img src="statics/images/wsc.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/wsc2.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/wsc3.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/wsc4.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/wsc5.png"/>
				</div>
				<div class="bg">
					<img src="statics/images/wscEWM.png"/>
				</div>
			</li>
			
		</ul>
		<div class="more">
			<a href="#">查看更多</a>
		</div>				
	</div>
	<div class="content dnsc">
		<ul>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			<li>
				<div class="img">
					<img src="statics/images/dnsc.jpg"/>
				</div>
				<div class="bg">
					<img src="statics/images/button.png"/>
				</div>
			</li>
			
		</ul>
		<div class="more">
			<a href="#">查看更多</a>
		</div>					
	</div>
	
</div>


<script type="text/javascript">
	$(function(){
		$('.category ul li').click(function(){
			var i = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.content').eq(i).addClass('active').siblings().removeClass('active');
		})
	})
</script>	
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
东京好运彩 www.587444.com-奇门遁甲预测彩票| www.58935.com-大同福彩中心| www.853346.com-河口彩客化学电话| www.759492.com-我想看彩票开奖今天| www.946899.com-开彩彩票app| www.577789.com-福彩开奖06期| www.670618.com-福彩3d和值对照表| www.439413.com-厦门体彩转让信息| www.631782.com-七彩阳光怎么跳| www.796152.cc-爱看彩彩票论坛| www.938572.com-双赢彩票网址| www.jp6.cc-河南福彩快三电脑版| www.5bm.cc-昆山体育彩票中心| www.17px.com-网易彩票不更新| www.5147.xyz-手机买彩票正规网站| www.764159.com-01彩票com-| www.910018.com-彩虹六号太难了| 39彩票www.3933h.cc| www.ld93.com-大彩网官方-| www.y13.bid-棋牌彩票代理有罪吗| www.62qp.com-彩票税率是多少| www.0652.cm-中彩高手大乐透| www.617709.com-风落中彩双色球推荐| www.727958.com-华夏彩票靠谱吗| www.808098.com-万景国际彩票网| www.893033.com-体育彩票足彩| www.967137.com-快三对子号组合表| www.qy2.com-中彩论坛资料| www.5eg.cc-河南快3彩票网| www.219.net-赛车时时彩app| www.4486.cc-北京快三安装开奖| www.480584.com-新浪国际彩票合法吗| www.9860.org-中国古代建筑彩画| www.061618.com-电子版彩票指南报纸| www.172857.com-福彩5d开奖走势图| www.91dm.cc-q彩网彩票投注平台| www.197775.com-全国福彩体彩试机号| www.036809.com-谁有全民彩票的网址| www.881740.com-彩票app试玩| www.lc38.com-内蒙古时时彩开奖| www.546256.com-如何在体彩机上装纸| www.009774.com-优信彩票登陆| www.125201.com-双色球彩票中奖| www.27vo.com-分分彩怎么玩最稳定| www.15bg.com-因为彩礼钱分手微信| www.234668.com-福彩有官方app吗| www.093300.com-体育彩票高频玩法| www.329896.com-体彩竞彩比分计算器| www.727620.com-快三中奖信息| www.490895.com-今曰甘肃快三结果| www.58869.com-福彩开奖预测结果| www.20oy.com-体育彩票3月16| www.111266.cc-福彩交流群微信| www.372556.com-江苏体彩老快三| www.257481.com-破解彩票思路| www.583327.com-彩色打印机价格| www.178134.com-快三就是一个骗局| www.275205.com-体育彩票七位数中奖| www.410381.com-爱尔兰彩票官网| www.968478.com-77彩票靠谱吗| www.194623.com-请把福彩三的早出来| 正点彩票网www.681048.com| www.784721.com-乐迎彩票app下载| www.949893.com-8炫彩彩票如何玩| www.al72.com-聚丰彩票客服端| www.308468.com-福利彩票胆拖计算器| www.lf19.com-505彩票网页版| www.43cz.com-竞彩分析师平台| www.2048.hk-易旺购彩大厅| www.0377.love-手机端下载彩乐汇| www.82239.com-中了彩票的人生| www.494304.com-vip9彩票-| www.657447.com-安徽体彩中心| www.878859.com-福利彩票代理青岛| www.gt12.com-大发快三内部人员| www.495338.com-博彩公司代理怎么做| www.005747.com-时时彩系统彩源码| www.592363.com-中国七星彩票规律表| www.196769.com-乐彩518-| www.148770.com-彩票追号投注计算器| www.603403.com-彩票中三个数多少钱| www.989535.com-中彩了app合法吗| www.296.me-5d中奖彩票被调| www.5097.cn-买了彩票的幽默段子| www.862787.com-七乐彩开奖走势| www.952278.com-不停售的彩票app| 聚福彩票www.50989i.com| www.ck2.cc-全国正规的福彩快三| www.530201.com-时时彩一星规律| www.633602.com-易网彩票网彩| www.815589.com-福彩3d固定图表| www.924722.com-富彩彩票-| www.aq42.com-贵阳福彩申请| www.uz51.com-3d彩吧图库天牛| www.11ny.com-577彩票com-| www.45773.com-大中华网上彩票| www.35.me-龙岩体彩中奖情况| www.80xa.com-农村医药报一新粤彩| www.964556.com-渐江体彩网下载| www.et09.com-信誉彩下载-| www.507128.com-三彩家app-| www.62284.com-彩吧彩票破解软件| www.585396.com-首充一元送18彩金| www.867798.com-兼职彩票游戏代打| www.5706.cc-信彩票网页-| www.54703.com-那个网站送免费彩金| www.53263.cc-快三能中多少钱| www.063631.com-重庆时时彩注册网址| www.251527.com-中彩软件下载| www.383201.com-买复式彩票怎么玩法| www.484354.com-多彩网信得过吗| www.5330.biz-微信上买彩票中奖了| www.974871.com-特区彩票论伝| www.14804.cc-彩仙散胆专家专栏| www.356272.com-网购送彩票犯法吗| www.981661.com-大成彩票-| www.67gs.com-分分彩龙虎技巧稳赢| www.6080.cn-彩票思路解析| www.ev79.com-吉林快三拿盘| www.992002.com-时时彩全天分析计划| www.2614.com-老九乐购彩票真实吗| www.677740.com-双彩网和值尾走势图| www.237587.com-下载中国福利彩票| www.038621.com-手机彩票万彩吧开奖| www.67793.cc-体育彩票赌-| www.48484.com-竞彩猫在哪里直播| www.01860.com-彩金网彩金网| www.946988.com-乐选3中奖规则体彩| www.047525.com-乐彩33app下载| www.216719.com-快三真坑人-| www.420185.com-卓易彩票违法吗| www.5920.biz-瑞彩祥云软件破解版| www.056074.com-买十二生肖彩票| www.808805.com-彩票讨论贴吧| www.901166.com-2o19彩票知识| www.ci4.com-致富彩票快三| www.99bf.cc-广东体彩网怎样扫码| 福彩网www.60007g.com| www.h18.name-江苏爱彩票-| www.622275.com-九彩app下载| www.728502.com-大连市体彩中心电话| www.797638.com-久久玩彩票app| www.860865.com-河南体彩中心地址| www.906185.com-吉林快三会不会作弊| www.956253.com-倍投彩票能稳赢吗| 中彩网www.81233d.com| www.gx20.com-鸿彩网合法吗| www.h41.net-彩票看一下-| www.29li.com-体育彩票都有哪几种| www.cai8896.com河北快三走势图形态| www.929971.com-大玩家彩票提不了款| www.66598.com-全民汇彩票秘诀| www.028597.com-五行与彩票3d| www.162836.com-100彩票app-| www.258181.com-购彩大厅下载手机版| www.596941.com-利盈平台彩票| www.757855.com-中彩网怎么挣钱| www.935383.com-正规彩票网址| www.cz26.com-私人招足彩分析师| www.44yt.com-彩虹6号墨冰价格| www.2205.top-彩票推广拉人技巧| www.611641.com-繁华世界彩票| www.682489.com-中央彩票公益金项目| www.749001.com-时时彩平台不给提款|