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.118476.com-彩票所有历史开奖| www.792372.com-怎么看彩票码中奖| www.1001.pro-足彩360专家军长| www.9486.tv-盛宏彩票手机版| www.266775.com-玩快三算不算赌博| www.338193.com-国彩app合买大厅| www.11623.cc-高频彩计划客户端| www.028732.com-杏彩登入-| www.054051.com-黑彩害了很多人| www.38906.com-01彩票邀请码| www.311980.com-兰州福彩中心在哪里| www.401946.com-中国福彩1期开奖号| www.517997.com-彩票投注平台导航| www.7622.cm-免费下载新浪爱彩| www.ff84.com-5000cc彩票-| www.95yh.cc-鸿彩灯光灯库下载| www.0620.vip-奥淘彩票abb| www.978564.com-福彩3d彩图报| www.ei57.com-彩票投注的投法| www.zp21.com-彩票幸运之门走势图| www.20ic.com-高频彩官方开奖| www.338325.com-几百期彩票-| www.803879.com-福彩上可以买吗| www.911701.com-快三彩票可以玩吗| www.986276.com-阿里彩票可以提现吗| www.fm70.com-凤凰快三破解| www.zz77.com-竞彩申请-| www.410360.com-看体彩开奖下载| www.80445.com-中彩网安微快三| www.140450.com-大连福彩中心地址| www.29583.cc-福彩3d8200-| www.110805.com-山西福利彩票十分钟| www.871384.com-彩票软件破解网站| www.cai0138.com快三是不是骗人的| www.77009.com-体育彩票分析预测| www.335254.com-网易世界杯彩票| www.502588.com-多彩投非鱼-| www.579529.com-淘宝送的彩票在哪看| www.883362.com-娜彩快开平台在哪| www.3108.live-特彩高手专栏| www.46444.com-体彩自助彩票机加盟| www.336971.com-广西快三大小计划| www.087029.com-鸿博彩票计划| www.2441.shop-福利彩票直播| www.870638.com-广西快乐双彩开奖结| www.663277.com-3g彩票门户-| www.815881.com-皇冠彩票外围| www.949431.com-佰盈彩票合法吗| www.fh38.com-时时彩反倍投绝对赚| www.21br.com-福彩哪个台-| www.76607.com-500彩票官网开奖| www.dj77.cc-中福彩票坑人| www.026402.com-彩票不倍投稳赚| www.207997.com-时时彩豹子出号规律| www.8870.loan-如何买福利彩票复式| www.0ge.cc-彩厍宝典下截| 凤凰彩票www.3479g.com| www.63595.com-七乐彩中奖票样图| www.811208.com-福彩3d怎样选号| www.637027.com-彩虹5出口-| www.623543.com-如何破解竞彩猫| www.kl.cc-皇都彩票入口| www.w30.vip-分分彩万最长龙| www.8818.top-南方彩票软件| www.666313.com-航天十一院彩虹公司| 中国福利彩票www.34788y.com| www.fb71.com-快彩平台骗局揭秘| www.941.org-彩吧首页论坛| www.506624.com-竟彩过滤软件app| www.4700.net-购彩网邀请码| www.594919.com-七星彩票杀号360| www.766272.com-福彩三地走势图表| www.873798.com-35彩票登录网址| www.988783.com-时时彩前三复式计划| www.36gf.com-福彩3d猜2d奖金| www.010036.com-人人中彩票苹果系统| www.41574.com-注册送18元彩票| www.86cp.com-必发彩票违法吗| www.598230.com-体彩足彩比分直播| www.531844.com-彩票中奖偏财符| www.076727.com-福彩3g字谜-| www.707295.com-凤凰彩票时间差漏洞| www.a74.pw-百赢计划彩票| www.836274.com-金海彩票-| www.960436.com-江苏盐城彩票一等奖| www.596499.com-有什么彩票计划软件| www.776551.com-唐龙说彩彩图版| www.949837.com-福彩3d和直走势图| www.992067.com-时时彩单期独胆技巧| www.dx54.com-快三街机游戏| www.440307.com-哈尔滨福彩出租出兑| www.dk14.com-分分时时彩出号口诀| www.615772.com-好彩店彩票不违法么| www.5555.cx-彩牛瓷砖美缝剂西安| www.18346.com-福利彩票几点关门| www.825103.com-中国体彩手游彩| www.212589.com-时时彩平台开户送钱| www.954300.cc-彩票赚钱软件正规| www.994551.com-惠赢彩票app| www.nc8.cc-排列三彩经网| www.714811.com-彩票人工计划网页| www.840896.com-彩票押大小骗局| www.942247.com-刚力彩芽比基尼| www.cp3768.com-幸运快三出号规律| www.0662.hk-彩票选号来自灵感| www.260028.com-时时彩平台网| www.ch45.com-特来彩票-| www.089956.com-体彩佣金的返还说明| www.922173.com-竞彩分析师怎么考| www.we80.com-游戏机彩金可以调吗| www.52yl.com-91彩站联盟骗局| www.98al.com-竞彩足球混合中奖| www.642125.com-彩票图形代表的数字| www.95823.cc-体育彩票面积| www.191183.com-苏州快三推荐号码| www.370365.cc-中彩网开奖查询网站| www.552769.com-玩彩票有什么技巧| www.726474.com-下载爱乐透彩票| www.868885.com-七星彩按顺序兑奖吗| www.976238.com-遵义订婚彩礼怎么给| www.sa48.com-重庆时时彩龙虎公式| www.01765.com-福彩跨度中彩网| 非凡彩票www.77210l.com| www.863221.com-足彩19049推荐| 金冠彩票www.49956b.com| www.3324.cc-彩色的梦教学设计| www.04474.com-彩票app微信提现| www.77bb.cc-体彩顶呱刮玩法| www.1547.vip-中国福到彩要双色球| www.06774.com-广西彩票11选5| www.39998.com-大发彩票站邀请码| www.77144.cc-竞彩任选九玩法| www.026887.com-三d彩吧下载| www.113013.com-竞彩猫微博-| www.092195.com-新浪爱彩比分| www.2277.hk-天才与彩票-| www.309390.com-体育彩票二串一| www.wt76.com-乐和彩开奖号码| www.055564.com-彩票类型有几种| www.644011.com-幸运十分彩哪出的| www.967363.com-彩票群怎么找| 500彩票www.50054j.com| www.135876.com-七星彩直码透露| www.392342.com-彩票平台哪里找| www.594909.com-京东彩票游戏| www.199047.com-体育彩票怎么买法| www.421774.com-网上玩快三犯法不| www.007689.com-研究彩票的经典书籍| www.161512.com-体育彩票奖池49亿| www.561771.com-万彩影像大师官网| www.686816.cc-全国彩票最大奖| www.964517.com-幸运快三网投彩票网| www.13rd.com-万彩吧资料大全| 大赢家彩票平台www.577972.com| www.72647.com-云南福彩中心官网| www.062353.com-重庆老时彩开奖结果| www.553453.com-足彩如何买稳赚不赔| www.628355.com-彩票赊账-| www.704622.com-爱彩乐登陆-| www.770634.com-必发指数网新浪爱彩| www.832038.com-接到境外博彩的电话| www.888239.com-500彩票怎么注册| www.rq32.com-体彩5分钟一次| www.t28.club-五福彩票网上晒照片|