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.620923.com-cp55彩票app| www.rt69.com-旺彩彩票官网| www.984469.com-彩运网com-| www.h34.com-中国体彩大透走势图| www.71873.com-官方五分快三| www.53fj.com-彩之星是不是违法的| www.699566.com-中国体育竞彩比分网| www.189348.com-今天时时乐彩票| www.578480.com-众盈彩票客户端下载| www.336346.com-万达彩票平台可信吗| www.482095.com-澳客网竞彩官网| www.597386.com-广州体育彩票| www.692515.com-幸运28购彩平台| www.u13.org-时时中彩票升级版| www.83ch.com-移动视频彩印| www.811093.com-网上买快三规律| www.301080.com-彩经网官网下载| www.216053.com-中彩票要交多少税| www.952945.com-七彩奖号码-| www.970899.com-迷彩兔看看-| www.807616.com-彩票之家免费公开| www.916042.com-辽宁彩票非法兑奖案| 网易彩票www.36788q.com| www.b57.me-中国体彩助手江西| www.84606.com-福彩双色球参考数据| www.386958.com-729彩票app-| www.060196.com-三亚彩票犯法吗| www.863094.com-19039胜负彩| www.569621.com-山东快三开奖福彩| www.772710.com-白菜彩金网大全| www.eb02.com-广西十分彩开奖记录| www.61se.cc-快三上海预测分析| www.058688.com-3d彩报第四版| www.051393.com-500购彩下载地址| www.761112.com-258竞彩彩票| www.870328.com-福彩3d幸运码安卓| www.967412.com-网上能买彩票么| www.cp776.com-快三平台计划| www.689130.com-体彩大乐透开奖信| www.777280.com-彩八仙苹果app| www.887232.com-易中奖彩票-| www.970173.com-燕赵福利彩票首页| 彩61www.649638.com| www.211789.com-今天广西快三走势| www.296863.com-惠民彩票平台登录| www.971076.com-买彩票从哪看出中奖| www.cai85.com-河南快三走势图| www.iu39.com-广东福彩网-| www.za88.com-体彩大乐透网上购买| www.61kn.com-解读心脏彩超报告单| www.237500.com-彩票3d玩法介绍| www.664846.com-家彩民之家提供香港| www.739420.com-乐发彩票下载软件| www.804476.com-最专业彩票源码系统| www.5ca.com-大彩网董事长黄孟杰| www.0733.mobi-网上购彩可靠吗| www.525764.com-购彩3玩法技巧| www.61899.com-领航彩票官网| www.11642.com-体育彩票足球规则| www.106197.com-浙江体彩61开奖| www.225660.com-马云买体育彩票| www.975535.com-冀彩宝最新版本下载| www.qy4.com-快三什么情况出豹子| www.17rb.cc-cb一分彩开奖记录| www.500.blue-恒彩最新登录网站| www.168911.com-快乐彩开奖结果| www.234737.com-中国体彩app下载| www.300118.com-中国足球彩票官网| www.509522.com-网上都有那些彩票| www.578862.com-深圳龙华某彩票店| www.640044.com-22彩票网址是多少| www.023399.com-内蒙古实时彩走势图| www.181845.cc-河北快三遗漏值| www.cp882.cc-网上快三代理怎么做| www.38sc.com-彩铅的颜色搭配表| www.456117.com-彩虹六号倍镜怎么装| www.574919.com-大发快三回血贴吧| www.679996.com-2mcc彩票下截| www.331595.com-3d晚报乐彩网| www.535625.com-中过大奖的彩票| www.227304.com-三分快三怎么看单双| www.185166.com-福彩快三彩票官方| www.054360.com-幸运快三助手app| www.148344.com-桂林福利彩票中心| www.4845.cc-体彩高频电视接收器| www.452611.com-彩c78-| www.56520.cc-福彩助学金-| www.126345.com-九万彩票改什么网址| www.219885.com-快三三不同中奖规则| www.290307.com-众达彩票网站| www.378036.com-七彩国际影城爱建店| www.484186.com-多彩网合法吗| www.556193.com-爱彩乐吧-| www.623506.com-邮政储蓄彩票定投| www.289245.com-贵州快三三不同全选| www.373360.com-8亿彩新版下载| www.497444.com-13彩平台下载| www.593391.com-多彩投烂项目| www.701530.com-两姐妹买彩票被骗| www.801996.com-长春彩票兑奖地点| www.904220.com-网上彩票如何代理| www.988301.com-江西省福彩网| www.0xx.cc-众乐彩票代理| www.j18.me-体彩排列三的胆码| www.46pp.com-印象彩票下载安装| www.575.tv-18121期胜负彩| www.9715.biz-彩票联盟平台网址| www.iq37.com-彩乐乐网走势| www.595326.com-西蔵快三开奖结果| www.680929.com-买彩票成瘾的表现| www.036530.com-k彩彩民福地登录| www.132607.com-彩票结果公告| www.569836.com-福彩票快3开奖查询| www.664865.com-体彩20选5开奖| www.796291.com-手机彩膜贴纸| www.881493.com-辉煌彩票可靠吗| www.80ny.com-智投彩票合法吗| www.67685.cc-093彩票下载| www.417798.com-盛大彩票网合法吗| www.126674.com-福建彩票36选7| www.37523.com-福彩快三购彩| www.570959.com-3434彩乐网-| www.668275.com-河北彩礼多少钱| www.128316.com-二四六天天好彩| www.907061.com-彩票有几位数字组成| www.qi83.com-广东好彩1预测分析| www.8858.vip-彩票中奖指南最新版| www.623876.com-彩票解码器软件下载| www.173617.com-最大正规快三平台| www.44wp.com-52彩票计划网| www.733235.com-试机号走势图彩宝网| www.80408.com-安徽省福利彩票发行| www.729923.com-全彩助手ios| www.858254.com-买体彩输钱-| www.971659.com-智慧彩自动投注| www.rx50.com-福彩网上投注站官网| www.62dw.com-呼和浩特市福利彩票| www.5476.org-有没有彩票职业玩家| 鑫彩网www.xcw866.com| www.ip08.com-河北快三走势图一定| www.011580.com-福利彩票什时候开奖| www.006740.com-体彩任选三结果| www.49894.com-足球彩票什么软件买| www.5920.vip-长春彩票中奖新闻| www.198368.com-时时彩两号对赌| www.9667.top-彩宝网app-| www.086170.com-时时彩五星走图| www.696920.com-彩神不能提现| www.789128.com-彩妆加盟店哪家好| www.873434.com-四川体育彩票中心| www.983022.com-五彩海棠-| www.fo89.com-uu快三规律-| www.636422.com-pc彩票游戏-| www.998223.com-福彩快三网平台| www.fy01.com-刷彩票流水-| www.f94.cc-在外国买彩票中奖| www.55458.com-电脑数字彩票的规律| www.012567.com-七星彩网易开奖| www.088922.com-123彩票合法吗| www.906317.com-彩票开奖-| www.965945.com-新彩网app-| 网易彩票www.093wy.com| www.178799.com-6+1体彩-| www.378635.com-k彩app怎么下载|