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.53932.cc-2323彩票网稳吗| www.868458.com-七乐彩杀号专家| www.01695.com-高频彩走势图| www.209033.com-赢钱彩app官网| www.07699.com-四下语文书中彩那天| www.839606.com-贵州体彩专家预测| www.580323.com-全国彩票弃奖榜| www.181140.com-app中彩彩票下载| www.271359.com-好彩1走势图福彩网| www.362237.com-彩虹的拼音-| www.p99.wang-快钱彩票是合法的吗| www.331220.com-彩神v1是什么软件| www.417372.com-体育彩票站设备| www.178824.com-中国体彩网-| www.588402.com-彩色五子球下载| www.537956.com-福彩诈骗-| www.672626.com-福彩3d双胆彩票网| www.465846.com-七乐彩中两号有奖吗| www.62558.com-彩票中奖指南百度云| www.tv01.com-华夏彩票线路| www.668892.com-中国人在外国买彩票| www.110202.com-七星彩一注中多少钱| www.192508.com-彩票中心有人蹲点| www.268672.com-竞彩猫杨震-| www.538564.com-银海彩报图片| www.352644.com-台湾福星彩开奖直墦| www.235000.com-彩500软件-| www.06078.com-彩票代投赚佣金| www.190316.com-吉林省快三儿| www.6656.in-腾讯分分彩五码二期| www.965043.com-彩七七介绍-| www.19ft.com-彩票春节休市七天假| www.117392.com-体彩app停售多久| www.0398.ren-驾着五彩祥云| www.24780.com-儿童彩铅画4~9岁| www.7375.top-下载七星彩局王奖表| www.410319.com-万达大玩家刷彩票| www.689358.com-五分时时彩二期计划| www.804000.cc-997彩票网址| www.885815.com-儿童彩铅画作品| www.963183.com-体彩顶呱刮新票| 彩乐汇www.748767.com| www.63ey.com-福彩3d早版布衣图| www.gx06.com-江苏福利彩票| www.3qb.com-中彩彩票在哪里兑奖| www.892571.com-英超足彩怎么买| www.198226.com-3d彩吧图-| www.66909.com-彩票领奖要多久| www.738811.com-江苏快三群微信| www.wv65.com-鸿彩彩票怎么样| 七天彩www.k796.com| www.563052.com-肥城体彩三亿| www.712590.com-中国福彩时时彩开奖| www.6613.top-bb彩平台下载| www.706179.com-聚星博彩是合法的吗| www.844062.com-体彩中心待遇好吗| www.928797.com-七星彩奖图局王| www.ez9.cc-时时彩内蒙-| www.216892.com-快三靠谱吗-| www.527579.com-赢彩王账号密码共享| www.15291.cc-彩虹形成的原因| www.55wx.com-福利彩票105| www.3306.vip-彩票选冷号还是热号| www.8945.com-紫薇福彩胆码预测| www.501336.com-今六给彩开奖结果l| www.888622.com-搜索一彩-| www.974434.com-昨天3d彩票中奖号| www.ak63.com-甘肃快三今日开奖| www.763977.com-5oo万彩票网官网| www.981506.com-创富彩票是真的吗| www.jm81.cc-赢发彩票用户注册| www.58oq.com-有人欠债中彩票的吗| www.7282.cn-彩虹上的小雨滴儿歌| www.56904.com-腾讯分分彩4星漏洞| www.083901.com-福彩今天的试机号| www.194598.com-快彩彩票官网| www.252876.com-湖北快三历史遗漏| www.77bi.cc-168彩票开奖网址| www.069313.com-优乐彩手机版下载| www.583279.com-彩票走势2元网| www.713970.com-易彩登陆平台| www.631882.com-七彩云南怎么坐车| www.717690.com-众彩网远程专家预测| www.906717.com-中国彩票种类和介绍| www.980573.com-成功彩票平台可靠吗| www.cp6855.com-北京快3彩票店开奖| www.tl98.com-排列三玩彩老头| www.25sh.com-华彩视频-| www.1444.xyz-电子游戏平台送彩金| www.0951.name-苏州竞彩店分布| www.721706.com-5分快三计划表| www.974428.com-哪个app能买彩票| www.062692.com-河内时时彩开奖号码| www.450605.com-数字3彩票开奖号码| www.228844.com-河南福彩开奖时间| www.338394.com-做梦梦到彩票中奖了| www.183731.com-3d彩票解密-| www.720012.com-七星彩内部透露| www.845338.com-中国体育彩票合法吗| www.0795.xyz-彩客网开奖查询| www.589630.com-香港七星彩趣味看图| www.935073.com-天天赢彩票合法吗| www.cai1250.com江苏福彩快3| www.rk08.com-500彩票彩种| www.139564.com-福州福彩中心| www.388231.com-荒漠迷彩图片| www.978768.com-彩坛公式规律专区| www.bg81.com-彩票计划师的大揭秘| www.zb32.com-3号彩票注册| www.239318.com-58福彩下载安装| www.998295.com-广州市福彩兑奖中心| www.at96.com-凤凰彩票平台下载| www.523925.com-竞彩足球软件靠谱吗| www.549416.com-体彩店能买足球吗| www.572705.com-纲力彩芽-| www.51792.cc-福利彩票快3中两个| www.826782.com-彩票开奖查询彩结果| www.500993.com-一幅彩色画-| www.3814.com-好彩什么意思| www.966651.com-河北福彩排5走势图| www.cai9433.com一分快三-| www.71949.com-冮苏快三推荐号码| www.su55.cc-技术型彩民选号方法| www.cp0036.com-看安徽快三开奖结果| www.bw59.com-河南快三赔率表| www.sc40.com-时时彩现在停了吗| www.923600.com-广东好彩一最新开奖| www.979194.com-福福彩-| www.an18.com-星彩三d论坛| www.qs26.com-体彩中心事业编待遇| www.r79.org-长春双阳黑彩| www.878212.com-福彩3d五行分解| www.658814.com-好运来彩票计划| www.334831.com-河北快三分析预测| www.84nu.com-中金彩票计划软件| www.1108.xyz-彩票店广告语大全| www.501048.com-彩云彩票平台下载| www.355759.com-常州体彩中心案件| www.010196.com-彩票加盟电话| www.438899.cc-万字开彩成绩中奖| www.020498.com-黔南州体彩中心| www.479828.com-足彩半场胜分析| www.69655.com-河南买彩票的时间| www.041001.com-时时彩包赚软件| www.695950.com-合肥福彩加盟电话| www.777154.com-澳客彩票售后电话| www.916558.com-私彩平台网址| www.ci24.com-体彩快乐十分走势图| www.7oa.com-彩票中奖秘密领奖| www.233002.com-中福快三技巧| www.9686.vip-十一万八彩礼寓意| www.245599.com-易彩堂彩票平台| www.354191.com-彩票投注手兼职| www.433433.cc-贵州买彩票外省兑奖| www.544208.com-男生教我玩彩票| www.234242.com-怎样制止老公买彩票| www.596256.com-云彩在线彩票app| www.60422.com-沈兴辉彩票什么梗| www.058073.com-1233彩票app| www.162403.com-170彩票预测| www.lb91.com-天天彩票网站| www.77hf.com-重庆时时彩第二十五| www.407800.com-七星彩到底怎么回事| www.sx10.com-澳门六会彩开奖结果|