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.887537.com-最新的下彩网网址| www.cp976.cc-今日安徽快三开奖| www.mw69.com-66微彩票下载安装| www.27bd.com-彩票预测模型| www.4475.cc-海南特区七里彩论坛| www.06551.com-福彩3d静态版| www.53704.cc-美团自助彩票机| www.003703.com-怎样玩彩票-| www.096258.com-彩票店的利润分成| www.176342.com-幸运快三全天计划| www.505732.com-头奖彩票官方网站| www.608531.com-中国竟猜足彩计算器| www.703272.com-彩票双色球随机一注| www.791844.com-万博博彩app下载| www.876696.com-体彩p3开奖视频| 博乐彩票www.35918q.com| www.gf62.com-网上快三彩票合法吗| www.yn67.com-导师带你买彩票赚钱| www.73dp.com-体彩杀码预测| www.1937.name-河南体彩手机在线| www.7749.com-彩票跟投骗局| www.31573.com-足彩竞彩贴吧| www.95829.com-快乐公益彩票| www.068164.com-天齐福彩三地走势图| www.182348.com-买彩票算是赌博吗| www.282280.com-彩票最灵中奖神咒| www.365683.cc-彩铅卡通人物画| www.456406.com-金彩网邀请码在哪看| www.552187.com-梦见火代表的彩票号| www.684900.com-牛彩网字谜汇总大全| www.770749.com-体育彩票网官方网站| www.884286.com-杏彩网页登录网址| www.967566.com-体彩大乐透选号器| www.yg9.com-开奖结果大发快三| www.wm14.com-幸运快三单双走势图| www.134.tv-彩虹彩虹的约定视频| www.3727.biz-七星彩合数理论| www.05660.cc-义乌体彩兑奖中心| www.67721.cc-河南福彩中奖蒋| www.055744.com-彩票站有哪些彩种| www.155564.com-海南体育彩票飞鱼| www.254219.com-凤凰网投时时彩网址| www.369582.com-福彩123论坛| www.492755.com-彩票投注站不兑奖| www.560638.com-领航时时彩缩水软件| www.680219.com-江苏快三官方注册| www.783505.com-新加坡彩票投注站点| www.882011.com-博彩套利-| www.987534.com-c29彩票-| www.pr.cc-老快三平台-| www.pi61.com-足彩19024任九| www.38yy.cc-鸿运彩票兼职| www.1303.vip-体育博彩官网| www.8943.me-全民彩票时时| www.60942.com-环球彩票骗局| www.068771.com-588彩票可靠吗| www.141403.com-中彩网是官方网站吗| www.579487.com-体彩排列三克皇一胆| www.670793.com-色彩一彩色这样的词| 国彩网www.guocai667.com| www.rl29.com-香港行政快三查询| www.29og.com-明天中奖彩票号码| www.1470.vip-如何画好彩铅线稿| www.8393.space-网易彩票开奖结果查| www.50377.cc-买彩票越输越想赢| www.010408.com-大奖网彩票电脑版| www.083159.com-65707彩票-| www.150465.com-计划稳中福快三| www.328285.com-乐彩3d字谜总汇| www.450050.com-乐盛彩票-| www.542011.com-亚洲彩票精选12码| www.731316.com-易彩堂平台安全吗| www.804441.com-足球彩票六场半全场| www.915178.com-盈盈彩可靠吗| www.999888.com-台湾彩虹旗-| www.as03.com-研究彩票走势图| www.wp06.com-下一个体彩排列三| www.26hm.com-足球彩票图片恒大| www.3248.in-冠彩直播下载| www.8848.blue-网易彩票网是真的吗| www.73415.com-彩圣网免费资枓| www.025484.com-大乐彩历史开奖号码| www.298533.com-腾讯彩票幸运大转盘| www.481458.com-幸运彩票腾讯5分彩| www.577914.com-微投彩票图片| www.693607.com-新浪彩票3d开奖| www.771892.com-盈利多多秒速时时彩| www.888160.com-福彩网注册总代| www.961517.com-北京快三规律技巧| www.cai389.com-彩神8官网-| www.kl66.com-易彩堂彩下载| www.12va.com-那个彩票软件比较好| www.0445.cn-亿彩彩票苹果版| www.8899.xyz-竞彩3串1中奖图| www.57950.com-七星彩质和走势图| www.030132.com-下载手机百度彩票| www.143592.com-炫彩字体-| www.227797.com-体彩网比分直播| www.290540.com-彩宝网排列三走势图| www.594838.com-唯彩会体育看球| www.783563.com-国际福彩5分钟| www.895017.com-彩票理财骗局揭秘| www.969325.com-执行彩票公益金| www.32tu.com-体彩十一选五吉林| www.2448.xyz-二分彩免费计划| www.16286.cc-中国足彩电脑版首页| www.72002.com-单机彩票手机版| www.037898.com-财神彩-| www.137606.com-9彩娱乐平台| www.273265.com-外围足彩玩法| www.367233.com-彩聊微信下载| www.520534.com-金沙彩票微信群| www.657162.com-360彩票网客户端| www.791469.com-今天体彩排三藏机图| www.886818.com-铭发彩票app| www.966459.com-全球彩是不是赌博| www.cp8665.com-人人快三官网| www.mh15.com-彩票发展下线技巧| www.1602.vip-买数字彩票-| www.24246.cc-宝马彩票真的吗| www.78387.cc-彩票3d的方法| www.066446.com-彩票大发快3平台| www.140275.com-体彩领奖地址| www.222964.com-快三辅助-| www.277915.com-牛彩网彩票指南彩报| www.401478.com-众彩彩票是骗人的吗| www.531629.com-彩铅星空眼睛画法| www.635959.com-福利彩票扣税标准| www.723911.com-彩票新3d交流群| www.790117.com-36选7好彩3玩法| www.861274.com-qq彩票在哪买| www.918216.com-体育彩票倍率| www.995402.com-易彩票网-| www.ba80.com-内蒙古彩票快3开奖| www.sg44.com-五省快三走势图跨度| www.10av.com-云彩店app下载码| www.71qx.com-福彩时间-| www.1145.cc-彩票店的广告语| www.8854.com-体育总局限制体彩| www.50624.com-彩票外围平台是什么| www.87739.cc-各种彩票计划网址| www.034010.com-时时彩购买软件网址| www.146544.com-北京快三的玩法| www.236010.com-手机彩票网软件| www.302111.cc-南国七星彩特区论坛| www.371807.com-黄鹤楼大彩抽法视频| www.477002.com-黑河福彩中心主任| www.539434.com-彩票行业发展| www.698958.com-华夏彩票合法吗| www.764563.com-体彩举报电话| www.863587.com-彩票接口调用| www.919726.com-彩票3快-| www.978325.com-彩钢板围栏报价| www.cai3644.com福彩快3走势图今天| www.kc73.com-快三线上第一门户| www.zo37.com-体彩兑奖流程| www.19dy.com-七星彩号码查询| www.867.live-彩铅樱花树怎么画| www.4149.org-七彩阳光标准| www.9618.xyz-爱彩足球比分| www.088649.com-天天彩开奖-| www.178017.com-内蒙古快三网上投注| www.332182.com-彩票现在正常了吗| www.411141.com-唯彩看球ios|