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.xd04.com-江苏快三综合走势版| www.8553.in-牛彩网首页手机版| www.087051.com-幸运彩票合法的吗| www.158590.com-龙江体彩七星彩| www.936885.com-菲律宾合法彩票平台| www.04446.cc-微彩国际骗局| www.962900.com-江苏福彩投注站明细| www.206795.com-永乐彩票是真的吗| www.692175.com-福彩3d官网-| www.296595.com-安徽十一选五彩票| www.731033.com-足彩必发指数查询| www.777801.com-中科公益彩票app| www.d65.xyz-128彩票网注册| www.281518.com-竞彩体育彩票店提成| www.390061.com-买彩票亏了钱怎么办| www.618815.com-青岛福彩兑奖地址| www.899847.com-天天彩票软件下载| www.112841.com-竟彩网计算器胜平负| www.41fr.com-足彩水位变化分析| www.733111.com-福彩投诉电话| www.897147.com-时时彩长龙统计| www.976140.com-信阳结婚彩礼多少| www.qf0.com-福利彩票是合法赌博| www.zw45.com-什邡体彩店-| www.30lu.com-足彩计算器竞彩网| www.971667.com-亿发彩票官方网址| www.ns1.com-甘肃福彩中心| www.1920.cn-福利彩票有哪些奖项| www.006982.com-分分钟快三有规律吗| www.72889.cc-体彩和值遗漏统计表| www.556007.com-凤凰博彩官网| www.914853.com-淘彩可靠吗-| 百姓彩票www.bxcp3.com| www.433581.com-狗万足彩app下载| www.47wi.com-多种大厅彩票360| www.0873.date-快赢彩票手机版| www.840163.com-福彩pc是什么| www.938239.com-北京快中彩中奖规则| 500彩票www.50080y.com| www.010630.com-搜狐彩票网官网首页| www.104193.com-金牛娱乐彩票| www.076303.com-众博彩票-| www.170223.com-湖北百宝彩快三| www.51309.com-三地中彩网走势图表| www.006914.com-五分彩破解器| www.6675.pw-秦兰香桂林彩调| www.008027.com-竞猜足球购彩大厅| www.751463.com-2020网络彩票| www.911612.com-全民彩票网网址| www.569740.com-福彩三d双彩网字谜| www.083.link-利彩平台是什么| www.6561.cn-19500彩票官网| www.520428.com-四川福彩12选五| www.654128.com-微彩排列三五奖表| www.756877.com-彩民彩票无法提现| www.821253.com-福彩双色球参考数据| www.885063.com-容华彩票官方网| www.956049.com-3d彩票谜语总汇| 600彩票www.600hc.com| www.2536.vip-饰彩的意思是什么| www.673989.com-古建彩绘博古图案| www.790539.com-网易必中彩彩票大师| www.893279.com-彩票大师软件| www.974075.com-好的彩票平台| www.bb78.com-喜乐彩-| www.144307.com-安徽快三走势图安卓| www.8439.pw-彩票网站如何运营| www.672611.com-七星彩19042| www.761728.com-时时彩怎么买才赚钱| www.02fq.com-彩票k线图如何看| www.725902.com-河北体彩领奖地址| www.808361.com-新浪胜负彩九场推荐| www.908584.com-安徽快三王-| www.8929.net-体彩直播七星彩| www.6860.org-体彩舟山飞鱼规则| www.416114.com-a彩娱-| www.918465.com-最大的博彩app| www.032931.com-上海十一选5爱彩乐| www.cai7555.com南昌快三走势图| www.929919.com-分分彩每次盈利十元| www.989900.com-天天时时彩小助手| www.mv34.cc-广西电脑福利彩票| www.097932.com-百度乐彩彩票网| www.186473.com-百盈快三下载| www.290602.com-赤峰快三开奖走势图| www.357997.com-55彩票平台合法吗| www.217440.com-快三一分app| www.mo04.com-彩61app下载| www.118584.com-中华彩票邀请码图片| www.y94.com-全国有多少个彩票站| www.749059.com-广东福彩快乐十分钟| www.947451.com-网上买3d彩票| www.110219.com-中国3d福彩-| www.236939.cc-310足彩最新分析| www.654789.com-时时彩怎么避免长龙| www.898186.com-重庆时彩刷返点方法| www.986149.com-杨震足彩推荐更新| www.eo63.com-快三单双大小下载| www.54oa.com-福利彩票演讲稿| www.365021.com-淘彩是什么东西| www.07883.com-足彩比赛直播| www.96326.com-没有识别码彩票| www.096775.com-众彩网双色专家汇总| www.766283.com-彩虹糖什么梗| www.920398.com-728彩票正规吗| 万利www.32123m.com| www.321.name-乐彩赢攻略-| www.058381.com-365彩票网首页| www.151593.com-怎么下载乐彩网| www.237439.com-中竞彩网首页| www.444.red-往期中奖彩票被调| www.949616.com-共享娱乐彩票| www.38491.com-找个买彩网站| www.ul8.com-彩票开奖七乐彩| www.c88.name-彩票机连接电视教程| www.82xx.com-3d多彩网字谜图迷| www.081336.com-买彩票咒-| www.160613.com-乐彩网摘3d-| www.006947.com-彩宝贝开奖查询| www.102026.com-九场足彩开奖结果| www.93pk.com-彩色的梦图片图画| www.668460.com-黑龙江结婚彩礼多少| www.731324.com-怀诚体彩店app| www.472338.com-中国体彩体了大彩图| www.585845.com-世界杯体彩中奖规则| www.659400.com-今晚七星彩是什么奖| www.726528.com-苹果版彩票app| www.800501.com-彩票3d试机号今日| www.870265.com-刚力彩芽和杨丞琳| www.38tt.com-七星彩讲解-| www.731090.com-我想买彩票如何申请| www.552233.com-采乐汇彩票-| www.822548.com-台湾彩虹眷村| www.ec87.com-帮买彩票赚佣金| www.458177.com-海南私彩包赢技巧| www.587227.com-跟着大牛买篮彩| www.666046.com-七星彩啥时候开奖| www.775549.com-石家庄体彩中心| www.851611.com-求足彩靠谱app| www.913523.com-彩客网ios客户端| www.966354.com-海南体彩下载软件| www.hl0.com-彩票屠龙-| www.701425.com-雪缘园足彩直播比分| www.928383.com-打彩票的技巧| www.4496.cn-9b彩票线路-| www.678947.com-旺旺彩票正规吗| www.549737.com-足彩害死多少人| www.058761.com-福彩彩报第一版| www.hl47.com-tt快三平台-| www.638008.com-竞彩计划网址| www.744953.com-体彩顶呱刮app| www.899775.com-彩81软件-| www.968024.com-刘亮彩票-| www.cp930.com-福建福彩网官网| www.953967.com-彩票店能追号吗| www.935999.cc-大发彩票在线计划| www.kd24.com-手机买彩票哪个靠谱| www.le29.com-八亿彩app下载| www.50uy.com-足彩曲昌春在哪推荐| www.774022.com-彩虹伞打地鼠玩法| www.848817.com-皇家时时彩软件下载| www.929966.com-竞彩过关方式对照表| www.976472.com-彩票中奖无人领奖| 大赢家彩票平台www.691307.com|