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天

知道了
亚洲28 www.41445.com-5050彩票官方版| www.894810.com-彩票助赢网页版| www.81172.cc-双数开彩是什么动物| www.520544.com-福彩绝杀六码走势图| www.603378.com-e乐彩注册-| www.683907.com-福利彩票天天中奖| www.777390.com-江西快三购买技巧| www.872842.com-海南够力七星彩奖表| www.951147.com-立彩彩票网-| www.qv20.com-qq分分彩官网开奖| QQ彩票www.89894h.com| www.527356.com-时时彩对子规律| www.636657.com-彩经网的大数据分析| www.759135.com-彩薇花化妆品| www.832759.com-体彩自动选号器| www.907801.com-体彩站点查询合肥| www.982198.com-河南快三单注奖金| www.ck93.com-网上彩票代理犯法吗| www.945850.com-足彩胜负14场玩法| www.es29.com-手机中彩网开奖结果| www.104622.com-幸运快三数字分析| www.208540.com-派彩网下载-| www.8973.biz-竞彩怎么买怎么死| www.087663.com-彩票app哪种最快| www.11635.cc-永久彩票平台| www.373688.com-鑫彩鸿装饰-| www.4170.com-彩虹6号下载| www.8271.biz-做假彩票发行| www.49678.com-江苏福彩兑奖中心| www.889096.com-竞彩彩店宝app| www.974786.com-体彩大乐透图表走势| www.gf28.com-创彩网真假-| www.741818.com-java彩票系统| www.835386.com-500彩票助手| www.925553.com-石家庄拓彩美缝剂| www.981950.com-东升彩票平台网址| www.rj.com-中彩网走势图| www.678573.com-三d彩之网-| www.oz39.com-银川体育彩票中心| www.739382.com-福彩k3网投apk| www.900185.com-快三介绍-| www.68909.com-新浪竟技彩票频道| www.066844.com-外围彩票安全吗| www.633325.com-竞彩篮球彩票不会看| www.35831.com-头条彩票老版本| www.34294.com-中国彩吧更懂民| www.118960.com-97彩票app下载| www.0735.date-开心七星彩网图版区| www.187189.com-时时彩猜豹子| www.72582.com-福彩大花猫图库3d| www.1027.in-福彩快3全买| www.902428.com-今天彩票报纸| www.988003.com-掌中彩正规吗| www.dm90.com-快三大全网-| www.554424.com-彩票经典对联| www.630505.com-彩报吧库-| www.704268.com-中国足彩馆踩踏喂食| www.144718.com-中国竞彩官方| www.250317.com-中彩娱乐可靠吗| www.212.xyz-微信彩票店购买有效| www.954416.com-牛蛙彩票四不像肖| www.110896.com-生日彩票计算器| www.0490.net-36o购彩-| www.099931.com-北京快三最后一期| www.251461.com-彩12app下载| www.007024.com-幸运彩彩票app| www.670877.com-排列五分析凤彩网| www.658776.com-体彩三码预测| www.143293.com-中国福利彩票现主任| www.293055.com-银川快三跨度表| www.442265.com-农村结婚彩礼| www.593881.com-七彩格子曝光| www.732277.com-订婚退彩礼案例| www.621375.com-巴夏讲彩票-| www.804486.com-p5走势图彩宝贝| www.944909.com-百姓彩票网打不开| www.bp82.com-彩票走势app| www.10291.com-老乐看彩双色球| www.017176.com-华宇腾讯分分彩| www.31vy.com-彩虹宝宝主题曲歌词| www.665175.com-体育彩票金七乐| www.678873.com-申请重庆时时彩代理| www.935236.com-臺湾福星彩图| www.81dl.com-8g彩票网站-| www.84840.com-牛彩涂3d牛彩图库| www.085230.com-湖北福彩领奖地址| www.21760.com-怎么找彩票台子| www.825278.com-有没有竞彩猫合买群| www.37pm.com-体彩十倍幸运| www.9471.cc-彩钢琉璃瓦多少钱| www.607967.com-云南福彩双色球开奖| www.xl.cc-河北快三的遗漏号码| www.0710.mobi-139彩票网手机版| www.206254.com-网上快开彩票骗局| www.339649.com-彩导航威尼斯| www.a10.biz-22彩票下载安装| www.ks6.com-体彩票开奖结果查绚| www.83dn.com-喝彩中华评委| www.876786.com-彩票以大博小技巧| www.qh03.com-黄好彩什么味道| www.9708.vip-彩票助赢倒闭| www.69706.com-下期预测定位七星彩| www.6860.me-舟山体彩飞鱼走势图| www.243309.com-福利彩票预测| www.275007.com-众博时时彩-| www.112619.com-毕竟快三一共多少期| www.411494.com-得彩近十期开奖号码| www.2255.biz-六开彩开奖结果开1| www.15fv.com-腾讯时时彩游戏规则| www.524658.com-浙江省福彩领奖流程| www.56797.com-时时彩做庄输惨了| www.124418.com-网络彩票计划群| www.876112.com-淘宝快三技巧| www.025068.com-幸运pc彩票平台| www.4888.online彩票排3开机号| www.02855.cc-彩拾彩票是真的吗| www.99893.cc-app大发快三| www.052939.com-体彩足彩开奖| www.111428.com-彩宝彩票是真是假| www.162723.com-152彩下载-| www.1uh.com-湖北体彩中心在哪里| www.30is.com-中国福利彩几点开奖| www.v58.xyz-大乐透彩票开将| www.53066.cc-重庆时时彩走势| www.131174.com-全国彩礼钱的地图| www.1182.website体彩谜语-| www.9509.in-今日运势一彩票| www.513466.com-网络买单双大小彩票| www.059933.com-春节彩票开奖时间表| www.215745.com-基诺型彩票玩法技巧| www.783609.com-cc分分彩有问题| www.913758.com-万彩网靠谱吗| www.9505.vip-财神腾讯十分彩| www.cs39.com-我爱彩票大发快3| www.395549.com-体彩星期四开什么| www.222886.com-四川快三走势图| www.292174.com-重庆快三怎么样| www.732592.com-汇彩阁聚彩阁出租| www.800027.cc-今天开奖福彩票开奖| www.870428.com-网购彩票是真的吗| www.927102.com-江西多乐彩11选5| www.976267.com-红彩会hch555| www.cp949.com-安徽快三开奖时间| www.796625.com-时时彩上瘾怎么戒掉| www.910016.com-彩界的精英-| www.984885.com-彩运8下载安装| www.cp172.com-大发快三安卓网| www.jx13.com-吉林福利彩票快三| www.ys93.com-重庆体彩兑奖流程| www.13sv.com-好彩1技术选号| www.253813.com-快三官方下载| www.61156.cc-新加坡彩票投注站点| www.9538.cm-彩色水泥路面价格| www.872689.com-817彩票-| www.997403.com-福彩乐透app| www.1504.cm-什么叫彩虹屁| www.613579.cc-彩虹六号会有国服么| www.701869.com-唯彩看球网站| www.770586.com-体彩三字迷-| www.835018.com-民生炫彩油画额度| www.893739.com-千亿彩票app| www.948011.com-双色球中彩网一擂台| www.988339.com-甘肃快三每天多少期| www.cp759.com-河北快三走势图新版|