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.1882.cm-八角星彩票网真实度| www.731037.com-推广彩票平台犯法吗| www.952290.com-快彩11选5开奖| www.k99.cc-大奖彩票网址是哪一| www.122874.com-中国彩虹计划| www.273851.com-手机如何买彩票| www.kc03.com-秒秒彩追号技巧| www.23.vip-七星彩内部有透露吗| www.763434.com-500万彩票网比分| www.978631.com-福彩网安全靠谱吗| www.em60.com-我想买彩票中大奖| www.g17.club-彩票太湖字谜41| www.554705.com-彩票回补什么意思| www.328053.com-重庆体彩十一选5| www.638182.com-足彩竞彩吧-| www.824130.com-三彩进货几折| www.911177.com-k彩手机彩民福地| www.979290.com-五彩缤纷香烟多少钱| www.bz74.com-今晚湖北快三开奖号| www.xn00.com-76858彩票下载| www.270631.com-093彩票安卓| www.371807.com-黄鹤楼大彩抽法视频| www.494896.com-湖北快三加奖介绍| www.581580.com-体彩几个号号才中奖| www.669642.com-新浪福彩今日运势| www.756252.com-天天中彩骗局| www.843878.com-竞彩弃赛怎么算段位| www.929698.com-七星彩应用-| www.988811.cc-时时彩下载安装苹果| www.su84.com-彩93-| www.347568.com-吉彩网是正规的吗| www.39393.com-全民中彩是可靠吗| www.93008.com-彩钢瓦屋顶防水施工| www.478365.com-积分兑彩-| www.585948.com-网络博彩平台后果| www.03gb.com-风之彩彩票是真的吗| www.0824.org-购买足彩的软件| www.09665.com-人人快三安卓客户端| www.001658.com-点彩流釉-| www.109802.com-足彩单场比分直播| www.514808.com-彩妆护肤加盟店| www.96199.cc-福彩体彩双机店取消| www.701151.com-中五亿美金彩票| www.7fs.com-河南快三几分钟一期| www.687002.com-中国福彩吧-| www.466405.com-体彩潮北11选5| www.383373.com-有选一个号的彩票吗| www.371582.com-掌上购彩7天| www.09642.com-多彩彩票提现安全吗| www.66604.cc-彩票3d下载-| www.977694.com-世界杯竞彩-| www.en39.com-1分钟开的彩票| www.207062.com-易彩网注册邀请码| www.695761.com-竞彩算法-| www.791384.com-福利彩票机选号有中| www.880536.com-七彩乐-| www.969927.com-有谁中过彩票的| 91彩票网www.912452.com| www.967265.com-河南快三和值图| www.cai6577.com3d彩票中奖号码| www.rn15.com-5分钟一开什么彩票| www.29.vip-河南福彩豫彩通| www.79963.com-江苏快三胆码| www.503122.com-c彩-| www.616760.com-彩票店打号-| www.wp04.com-彩票表格制作| www.38jx.com-马家窑彩陶王| www.203615.com-福彩5d规律-| www.120652.com-体彩抽成-| www.377208.com-腾讯分分彩后三跨度| www.975004.com-中华福彩网-| www.c4.cx-北京快三预测推荐表| www.248966.com-官彩有哪些-| www.351282.com-冠军彩票网平台| www.452878.com-彩金用收米的app| www.7778.loan-竞彩足球投注方式| www.869036.com-北京快三贴吧| www.956561.com-彩票统计学概率学| 网易彩票www.07163z.com| www.hp29.com-上海快三最好的技术| www.pc9.com-派彩每日推荐| www.yk41.com-福彩兑奖查询| www.8137.cm-福彩哪种开奖最快| www.029597.com-爱投彩票ios| www.232615.com-彩票怎么玩的| www.813494.com-福利彩票3d新彩吧| www.905836.com-亚搏彩票app| www.976128.com-河南林州彩礼钱多少| www.cp9828.com-甘肃快三跨度走势图| www.63982.com-澳洲5分彩计划软件| www.26171.cc-手电筒彩虹实验| www.733111.cc-西安快三真假| www.830131.com-大圣彩票团队计划| www.895477.com-体彩终端机提现| www.954476.com-彩经网排列三和尾走| 大福彩票www.df79.com| www.804059.com-泉州福建体彩聊天室| www.878615.com-彩神通代理是真的吗| www.948223.com-福彩3d上仙杀码| www.994609.com-总彩票心得-| www.bd45.com-安徽快三老板走势图| www.600020.cc-买彩票连一个也不中| www.491208.com-彩票能退吗-| www.614560.com-福彩3d近期竞彩| 风之彩www.388510.com| www.274535.com-一分钟快三有假吗| www.795619.com-吉林快三经典版走势| www.881690.com-彩票高佣金兼职平台| www.960938.com-热点彩票-| 大赢家彩票平台www.723095.com| www.vo28.com-时时彩追长龙玩法| www.4131.org-彩虹的重力苏东霖| www.456403.com-彩易达出租-| www.905824.com-中国福利彩种| www.40rk.com-新大陆重庆时彩计划| www.521717.com-网上玩时时彩会抓不| www.759055.com-至尊彩邀请码| www.994381.com-上海快三群-| www.523565.com-时时彩加盟官网| www.690200.com-足彩爱彩新浪竟彩| www.128456.com-大奖网彩票首页| www.975435.com-彩宝彩票在线客服| www.1ef.com-手机买彩票哪个好| www.165227.com-跟群计划买彩票| www.078889.com-7星彩复式投注规则| www.497373.com-什么是13彩-| www.k63.com-彩票试玩账号赚佣金| www.ws9.cc-福彩新快3微信| www.0791.cc-博彩王彩票软件下载| www.782992.com-新浪福彩走势图表| www.uq36.com-彩票近500期走势| www.630522.com-一九图库彩吧| www.809734.com-体彩3b开将号| www.934033.com-贵州快三软件| 华人彩票www.424223.com| www.030079.com-好运快三遗漏| www.41999.com-买彩票输了8万| www.807495.com-有老师带的彩票| www.505262.com-皇爵国际时时彩| www.607488.com-3g网址彩票-| www.730119.com-37彩票app下载| www.851666.cc-智胜彩票网-| www.947896.com-福彩竞猜-| 博汇www.818827.com| www.147313.com-乌鲁木齐快三| www.208650.com-湖北快三坑人| www.ed44.com-福彩网的邀请码多少| www.ya69.com-内蒙古时时彩玩法| www.086747.com-福彩三d走势图网易| www.183785.com-全国快三形态走势图| 3668彩票www.3668n.com| www.113115.cc-企鹅直播竞彩猫| www.827182.com-哪里玩彩票的人多| www.5569.vip-d8彩票登陆-| www.130567.cc-彩票混沌周期表| www.91607.com-广东彩王图库| www.095581.com-爱彩乐黑网-| www.642452.com-七乐彩开奖号码今天| www.4388.vip-3d彩博士-| www.271764.com-昨天开福利彩票中奖| www.850759.com-体育彩票号码机选| www.tg5.com-今天青海快三走势图| www.379111.com-咔咔彩票-| www.140074.com-官方01彩票app|