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天

知道了
百盈PK10 www.40004.com-中国3d中彩网| www.31416.com-麒麟竞彩怎么下载| www.828397.com-665彩票网-| www.980907.com-本地七彩冰淇淋| www.pb79.com-竞彩专家推荐| www.042280.com-多彩贵州网湄潭新闻| www.618411.com-19050体彩-| www.876462.com-网上福利彩票去哪买| www.oc92.com-大发快三登录| www.1079.cm-什么人买彩票能中奖| www.632095.com-时时彩四星杀号方法| www.788784.com-全国360彩票开奖| www.910416.com-澳客网足球彩票下载| 成功彩票www.le33.cc| www.931987.com-七星彩一等奖保底吗| 易彩网www.12455n.com| www.1784.com-网上买高频彩| www.576329.com-赢钱彩充值卡| www.665811.com-手机玩彩票下载安装| www.757036.com-快三应该怎么买票| www.kq34.com-五百万彩票网完整版| www.233785.com-福彩排列三直播| www.151124.com-瑞祥彩云彩票网页| www.5253.me-像好彩投一样的网站| www.524006.com-时时彩四星走势| www.616608.com-深圳彩票黑客案判了| www.704071.com-大发快三稳定盈利| www.819826.com-买彩票英语作文| www.888766.com-网易彩票为啥不能买| www.959550.com-小站宝彩票在哪注册| www.cp557.com-彩票黑平台排名| www.06py.com-彩票网站背后的猫腻| www.3865.in-广州体彩中心网| www.13983.com-竞彩网app-| www.47312.com-山东德州快三走势图| www.600756.com-3d家彩网独胆| www.150002.com-国民彩票手机版下载| www.089045.com-彩神争霸11app| www.5557.vip-福彩3d龙门绝技| www.258060.com-地主彩票-| www.582514.com-高频彩二十分钟一期| www.9998.me-体彩重庆-| www.a21.xyz-荣誉彩票是干嘛的| www.39271.cc-3d双彩论坛字谜| www.226052.com-ag彩-| www.465969.com-买彩票发现漏洞| www.664754.com-今天七乐彩开奖吗| www.3297.bid-978彩票最新版| www.934799.com-彩盈自主彩票| TT彩票www.356036.com| www.891801.com-彩票全天免费计划| www.287835.com-福利彩票购彩大厅| www.56572.com-邯郸彩票中奖人| www.2471.xyz-彩客游戏币在哪兑现| www.087109.com-篮球彩票分析软件| www.172397.com-彩票快三技巧| www.332043.com-彩票了的利润| www.371010.com-黄金时时彩计划王| www.89rx.com-竞彩篮球一定牛| www.941667.com-凤凰彩票网-| www.619981.com-竞彩冷门凯利| www.722892.com-万森彩票平台手机版| www.809805.com-考核彩票自助售票机| www.894904.com-统一彩票一分快三| www.50uw.com-乐彩网双色球下载| www.146444.com-篮彩韩篮比分直播| www.809140.com-众彩博长是什么意思| www.966981.com-七星七彩开七奖结果| www.xr11.com-中国彩票中奖者被杀| www.8933.net-网易彩票信得过吗| www.7419.vip-竞彩网点地址| www.4570.top-中彩网糖果视频分析| www.77hg.com-时时彩第72-| www.637077.com-腾讯分分彩做号| www.7421.cn-色彩构成图片简单| www.72307.com-红中彩票手机版下载| www.142952.com-彩8娱乐平台| www.234744.com-彩票游戏平台| www.325646.com-六和合彩网站王中王| www.361038.com-彩票学校-| www.451382.com-赌彩票家破人亡事例| www.552458.com-福彩3d概率计算| www.717221.cc-彩铅对孩子的好处| www.590912.com-竞彩软件排行| www.697422.com-乐彩app官网下载| www.884634.com-彩票走势图怎样分析| www.981894.com-彩之星是正规的么| www.fp38.com-uu快三手机购彩| www.116146.com-刮彩票怎么玩法| www.190513.com-e球彩玩法-| www.319688.com-博友彩票合法吗| www.390768.com-平安彩票网站| www.271079.com-新加坡版好彩双爆珠| www.835029.com-好彩香烟哪里有得卖| www.265878.com-银川市福彩兑奖地址| www.027143.com-米橙购彩平台| www.mc47.com-中彩网快三图怎么看| www.7128.org-七彩本草滴丸| www.374818.com-246天天妈彩| www.e81.club-全国最大彩票站| www.78tn.com-中国彩吧安卓下载| www.2304.xyz-彩票店上班的坏处| www.9374.cc-福彩的钱去哪里了| www.626044.com-盈丰彩票靠谱吗| www.772669.com-签到送418彩金| www.699620.com-福彩3d太假-| www.670441.com-106在线彩票安卓| www.799972.com-彩票开奖查询及公告| www.900290.com-江苏体彩网官方首页| www.mt17.com-福彩都有什么彩种| www.15sl.com-星空幸运彩网址| www.292123.com-彩票站打票员好干吗| www.91111.com-好彩香烟种类| www.49132.com-一分钟分分时彩软件| www.048474.com-澳门3d彩报第四版| www.146033.com-3的新彩吧-| www.217397.com-下载快彩助手| www.633859.com-七彩教育集团总部| www.567980.com-大鹏金服乐彩怎么样| www.239663.com-大发快三开奖记录| www.344268.com-超神快三平刷破解版| www.188940.com-内蒙快三专家推荐| www.948529.com-快三群骗局-| www.357192.com-中了彩票离婚| www.680281.com-网易彩票中奖不承认| www.12099.com-大发快三赔率高| www.68803.cc-怎样提高彩票中奖率| www.027901.com-一号彩票输惨了| www.94iq.com-易彩堂的邀请码是| www.25tf.com-体彩店销售网点查询| www.94vo.com-购买体育彩票app| www.12sm.com-彩帝彩票正规吗| www.621813.com-今天三d买什么彩票| www.689062.com-天天彩票下载安装1| www.761852.com-彩色复印机2083| www.819378.com-竞彩让球欧赔分析| www.884408.com-广西快三好运走势图| www.947263.com-排三彩吧图库第二版| www.986304.com-阿里彩app-| www.ko2.cc-快三吉林技巧| www.025813.com-3号彩票手机软件| www.114240.com-彩神vii注册| www.715707.com-两元彩票一般几位数| www.289308.com-乐彩网首页福彩| www.330077.com-国彩吧-| www.471892.com-三色彩票公司| www.562552.com-高频彩正规平台| www.585300.com-欧洲时时彩开奖记录| www.670268.com-中彩票40万拿多少| www.592722.com-彩虹8无人机| www.521819.com-福建彩票大奖名单| www.579190.com-鸿运网购彩大厅| www.965934.com-彩票店广告宣传语| www.wz22.com-七星彩今期的神算子| www.32ar.com-竞彩足球返奖率| www.339748.com-网上快三平台靠谱不| www.xw02.cc-凤凰彩票pk10| www.800007.com-上海彩票有哪些| www.1171.top-71彩下载苹果版| www.180791.com-购彩-| www.417735.com-彩53app官网| www.521305.com-彩票开qq群拉人| www.575717.com-久久彩票大发| www.278872.com-新快三如何打|