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.57862.cc-黑彩票网网站举报| www.fe29.com-七星彩免费9组头尾| www.79iz.com-彩票开l奖-| www.52894.com-好彩香烟味道| www.0409.cm-彩乐园应用下载| www.018767.com-彩票过滤软件哪个好| www.cm22.cc-廊坊快三走试图| www.435554.com-体育彩票选点要求| www.198303.com-贵州体彩下载软件| www.789163.com-足彩中奖怎么算奖金| www.552350.com-神彩网高手论坛| www.528434.com-中国体彩竞彩返点| www.779666.com-七星彩彩票投注方法| www.21hd.com-网易彩票大乐透专家| www.089300.com-金福彩票网手机版| www.166500.com-广西快三怎么玩| www.96816.com-东方眼崔永元彩票| www.073179.com-福彩彩票软件| www.754511.com-河南彩经网app| www.504528.com-彩排的重要性| www.637538.com-彩虹隐身无人机| www.815022.com-彩票技巧的书| www.095265.com-爱彩乐可以买彩票吗| www.195882.com-彩票开奖结果查绚彩| www.598508.com-今天七星彩号码多少| www.007447.com-幸运彩app苹果| www.629697.com-红彩会彩票-| www.769646.com-姜山冷门足彩博客| www.bn29.com-快三图标图片| www.v31.org-时时彩自动买号软件| www.8871.org-怎么举报网络购彩| www.991877.com-乐彩官网-| www.fe00.com-王牌彩票网论坛| www.x32.pw-体彩双旦毒胆| www.555728.com-彩票网11选5| www.654903.com-优点彩票下载| www.742727.com-彩票屠龙软件| www.859122.com-彩神争8邀请码| www.272086.com-三军大小快三咋看的| 体彩网www.3890f.com| www.520015.com-众彩彩票有多少年了| www.9669.cn-香港生肖彩论坛| www.538351.com-鸿运5分彩输了| www.274721.com-大发时时彩开奖号| www.365507.cc-即时开彩最新| www.516267.com-乐彩赢代理怎么取消| www.84ej.com-花生彩票官方下载| www.97591.cc-亚博彩票登陆网站| www.967626.com-彩民qq群-| www.is3.com-福彩基诺中奖规则| www.731076.com-彩票3分快3-| www.77it.com-万彩国际app下载| 梦想彩票站www.43131f.com| www.193038.com-韩国快三官网| www.370769.com-111时时彩票| www.306955.com-江西福彩网开奖| www.372176.com-吉林快三分析| www.802181.com-彩界小皇帝赌一胆| www.163622.com-竞彩足球串关容错表| www.459790.com-福彩刮刮奖倾家荡产| www.597463.com-最近的彩票站的位置| www.063624.com-彩票站什么时候淡季| www.611269.com-彩虹岛手游安卓版| www.804006.com-广西体彩十一选五| www.922253.com-365彩票怎么样| www.622243.com-三分时时彩有规律吗| www.8765.pw-秒秒彩官网-| www.968313.com-亿彩40066下载| www.00gn.cc-百乐彩今晚开奖结果| www.42752.com-中彩网怎样支付| www.252601.com-快三的代理的平台| www.328077.com-乐彩论坛手机版| www.549177.com-网上彩票驿站骗人| www.557742.com-彩票一龙双凤图| www.620886.com-福利彩票双色球加奖| www.370160.com-四季彩代理最高返点| www.163448.com-体彩刮刮乐种类| www.k60.net-足彩310啥意思| www.054275.com-福建省彩票领奖中心| www.234057.com-福彩3d复式投注表| www.817.cc-彩达人计划网页版| www.667228.com-体彩中奖号码是多少| www.561696.com-彩票3d图库蓝精灵| www.865585.cc-3d福彩推荐-| www.979104.com-彩票481开奖结果| www.9334.top-福建体彩大乐透开奖| www.750092.com-金牛彩票app下载| www.826173.cc-速赢彩app-| www.897464.com-五百竞彩比分直播| www.976714.com-四川广元彩礼价目表| www.cp161.cc-福彩快三走势| www.iq20.com-3d彩票吧-| www.719793.com-机选5注七星彩| www.04df.com-广东体彩1-| www.99jc.cc-中彩网3d杀尾| www.2732.in-江苏快三第一期| www.001577.com-贵州快三今日推荐号| www.911147.com-彩票奖项说明| www.448207.com-胜负彩19026| www.03380.com-今日彩票推荐| www.790232.com-彩吧图库第一版今天| www.632873.com-众乐彩网-| www.727973.com-山东中彩乐下载| www.840466.com-足彩赔率规律| www.917842.com-这期体彩的中奖号码| www.987599.com-彩票助手追号计算器| www.ys42.com-山东福利彩票兑奖| www.50cv.com-竞彩如何对冲赚佣金| www.0161.top-彩色饺子宣传语| www.7501.pw-漳州彩票店-| www.319201.com-海南七星彩天涯社区| www.11186.com-任九胜负彩开奖结果| www.72547.com-体彩19023开奖| www.48239.com-篮彩app哪个好| www.338056.com-彩票助手大全| www.937669.com-50彩票-| www.597784.com-彩票投注站概况| www.691829.com-胜负彩查询-| www.762286.com-网络彩票怎么能稳赚| www.823493.com-彩吧论坛牛材网| www.895026.com-彩票可以往投资说吗| www.961197.com-竞彩猫今天直播| 众乐彩票www.389144.com| www.51210.com-福彩时时彩10分钟| www.29654.com-香港马会彩票中心| www.005361.com-河南福利彩票3d| www.59711.cc-彩虹连衣裙-| www.cp5662.com-快三游戏下载| www.539284.com-关于彩票店转让官司| www.74bv.com-只是购买黑彩| www.151912.com-江苏快3彩票网| www.090114.com-福利彩票3d小规律| www.155116.com-彩票上的签名区| www.241829.com-七星彩复式怎么玩| www.319345.com-体彩游泳夺金走势图| www.456982.com-创富彩票网客服| www.065912.com-网赌送彩金-| www.624.date-网赌时时彩输| www.312388.com-鑫彩网买彩票安全吗| www.387599.com-做梦梦到彩票没中奖| www.020601.com-江苏福彩抉3一定牛| www.595077.com-体彩五地走势图| www.657244.com-福彩3d打票机界面| www.709210.com-新浪竞彩足球胜平负| www.773580.com-谁有全民彩票群| www.844191.com-飞腾娱乐彩票网站| www.896465.com-捡了一注彩票中奖了| www.961154.com-彩票奖金有多少| 中国福利彩票www.08588m.com| www.607695.com-足彩竞彩亚洲杯| www.828028.com-彩票中奖号码app| www.949977.com-金沙彩票app| www.gh53.com-福利彩票开奖直播| www.361182.com-十分快彩-| www.la89.com-体育彩票图谜| www.18uh.com-卖私彩被诈骗怎么办| www.5401.org-足彩竞彩中奖规则| www.782908.com-关于中彩票的故事| www.878559.com-体彩福彩开奖日| www.998297.com-福彩3d手机报| www.co31.com-福彩时时彩怎么玩| www.uq22.com-彩票五行属性| www.906059.com-彩票购买网站| www.dp82.com-81678v快彩-|