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天

知道了
彩01彩票 www.327191.com-彩票开彩票开奖结果| www.940203.com-澳门快三骗局| www.y02.me-福彩往期所有| www.1368.in-南京福彩网-| www.71322.cc-江苏快三遗落号| www.68cb.com-彩9网-| www.69593.cc-99购彩票破解版| www.fk53.com-湖北快三开奖定牛| www.b33.me-49c彩票-| www.52yl.com-91彩站联盟骗局| www.2643.xyz-糖果彩app客户端| www.8409.com-网易彩票现场直播| www.11575.com-新浪爱彩足球| www.971.cc-七星彩怎么计算合分| www.04443.com-哪个软件还能买足彩| www.71905.com-财经郎眼讨论彩票| www.335.online-天天彩票钻石三肖| www.8644.loan-受彩乐-| www.92og.com-五八彩票-| www.9314.me-香港赛马彩票玩法| www.168854.com-爱彩乐快3-| www.303826.com-鑫彩网靠谱吗| www.435035.com-pk彩票下载-| www.578740.com-h500彩票网-| www.659530.com-明发彩-| www.731435.com-福彩快三算赌博| www.801770.com-金牛彩票线路导航| www.874117.com-彩票完整源码| www.940128.com-重庆福彩公告| www.989012.com-彩票网站思路| www.mn7.com-新浪彩票开奖| www.ot31.com-手机购彩安全吗| www.972049.com-印尼五分彩开奖官网| www.gm77.cc-中福快三如何看大小| www.n49.net-中国体彩开奖现场| www.51io.com-仁信彩票下载安装| www.774.me-蝴蝶彩色画-| www.4557.cn-九九彩玄机精华帖| www.9472.cc-上海彩钢房| www.43247.com-体彩35选7走势图| www.18zb.com-体彩足彩比分| www.979069.com-中固足彩网比分直播| www.xt5.com-快三开奖号码表| www.tm14.com-福彩交流群公告| www.03ue.com-兰花图片手绘彩铅画| www.936094.com-时时彩个位走势图彩| www.ds34.com-江苏快三有赢钱的吗| www.9mh.cc-七星彩单票图片| www.899.website技术型彩民中奖技巧| www.00568.cc-南方双彩网3d和值| www.87868.com-2118彩票cp-| www.135538.com-开彩票店流程| www.563.hk-1888玩彩票-| www.9843.biz-古建梁彩绘博古图案| www.030474.com-福彩双色球杀号技巧| www.750313.com-全民彩票免费下载| www.qb.cc-北京快三和值表| www.00vd.com-现在什么彩票最热门| www.033160.com-678彩票网注册| www.8325.live-快3彩票是骗局吗| www.545485.com-彩票计算软件哪个好| www.702233.com-彩票信用玩法区别| www.812866.com-如意彩票正规吗| www.940626.com-6618彩票app| www.52kl.com-丰彩漆业-| www.7652.top-普通彩票尺寸| www.52961.cc-青海体彩大奖| www.034887.com-青岛市福利彩票中心| www.221427.com-彩票开挂神器免费| www.377992.com-体彩装修补贴标准| www.625015.com-福彩过年-| www.802599.com-湖南彩票领奖地址| www.974135.com-最新唯彩视频双色球| www.53711.com-三时时彩人工计划| www.025445.com-徐文轩彩票预测网| www.142122.com-广西福彩中心地址| www.285988.com-今天福彩开奖号| www.392213.com-彩铅人物素描图片| www.668377.com-网络赌彩平台| www.829528.com-高频彩票分析仪| www.962920.com-中国彩票双色球下载| www.91328.com-炫彩手机贴膜| www.586477.com-云南爱彩乐-| www.743178.com-香港皇家彩-| www.905235.com-伯爵彩票app下载| www.fr08.com-江苏快三奖金多少| www.02gw.com-世界杯体彩不让买了| www.5659.cn-彩108彩票下载| www.49128.com-旭彩美缝剂电话号码| www.059761.com-七星体彩特区沦坛| www.195223.com-上海快三历史开奖| www.345673.com-彩漫福利本子| www.580205.com-体彩办专管员| www.958331.com-鸿运网快三是真的吗| www.ma29.com-湖北福彩3d试机号| www.45jq.com-好彩香烟多钱一盒| www.126785.com-彩票数据统计工具| www.249675.com-彩23app-| www.408443.com-兰考结婚彩礼多少| www.586047.com-天天爱彩票人工客服| www.680017.com-安卓彩票-| www.808517.com-手彩票开奖-| www.966201.com-广西快三走势遗漏图| www.cai5757.com湖北福利快三走势图| www.yl71.com-彩票计划gcbcc| www.n26.online-赢钱彩是真的吗| www.070049.com-云来娱乐彩票| www.482626.com-彩票上扫码兑奖| www.597423.com-一十选五彩票下载| www.760048.com-时时彩预测计划在线| www.894260.com-彩票大奖图片| www.977416.com-兰考彩礼2018| www.6447.cm-七彩应用-| www.53586.cc-吉林快三今天一定牛| www.180646.com-快三自动投注软件| www.289111.com-app计划彩票网址| www.925939.com-彩票中奖以后的故事| www.ei60.com-彩色混凝土路面做法| www.o45.com-数学彩票-| www.544360.com-快三计划加-| www.644577.com-足彩最新伤停| www.wh8.cc-新加坡快三开奖助手| www.za77.com-分分钟彩票赛车| www.0213.in-百度彩彩票可靠吗| www.63616.cc-彩要开奖结果| www.057329.com-彩神怎么样-| www.181051.com-快三单双关系加减一| www.265419.com-3d福彩吧-| www.352009.com-福利彩票有中奖的吗| www.510368.com-时时彩怎样平投| www.585161.com-网易彩专家预测新浪| www.937838.com-彩票软件时时彩送| 乐彩赢www.0014n.com| www.mq91.com-重庆时时彩营业时间| www.45mb.com-中博彩票被骗| www.425078.com-彩票大赢家快乐十分| www.673318.com-古建彩画图案| www.65av.com-太原福彩中心在哪| www.1089.live-邯郸体彩站转让信息| www.62593.cc-盛兴彩票v1系统| www.067920.com-彩票app建设| www.168921.com-贵州体彩11选5| www.345160.com-体彩大乐透直播视频| www.506996.com-陕西快乐十分钟体彩| www.637365.cc-彩虹5无人机尺寸| www.962417.com-福利彩票什么选号| www.cai5502.com内蒙古快三360| www.33746.com-彩22app是啥| www.13cq.com-彩吧彩票是骗人的吗| www.954223.com-今天的3d彩票字谜| www.ez32.com-彩票官方网站| www.70hl.com-体彩是如何作假的| www.36915.cc-577彩票官网登录| www.110672.com-今日彩票开奖详情| www.644090.com-青蛙彩一秒前往| www.263157.com-什么是彩票托| www.293190.com-彩票缩水过滤工具| www.424808.com-49官方彩票网| www.533161.com-澳门生肖彩-| www.651966.com-幸运彩票平台骗局| www.752335.com-网上买彩票最新消息| www.848688.com-竞彩比分推荐专家| www.902896.com-彩店宝彩票客服电话| www.954668.com-代购美国彩票合法吗|