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.58465.com-五洲彩票下载安装| www.017212.com-体育彩票店几点关门| www.528777.com-体彩店布局图| www.089630.com-阿里彩票怎么回事| www.007746.com-中国体育彩开奖结果| www.271679.com-好彩1生肖对应表| www.990280.com-多乐彩票-| www.df58.com-中国福利彩快三直播| www.663381.com-彩票nba-| www.56.link-zfc彩妆加盟费| www.95fz.com-线上投彩带犯法嘛| www.2799.top-好彩头平台可靠吗| www.8822.hk-高频彩联盟官网| www.879795.com-网络快三正规吗| www.630005.com-3d新彩票走势图网| www.984572.com-竟彩258-| www.hn12.com-上海时时彩开奖记录| www.2661.com-便民工作室彩吧| www.16300.cc-足球竞彩靠什么分析| 乐点彩票www.239828.com| www.69015.com-金尊国际彩票注册| www.627879.com-凤凰彩1平台客户| www.731842.com-8k彩票犯法吗| www.880555.com-会员登录百胜彩票| www.975945.com-旧够力七星彩奖表| www.kw2.com-快三有没有规律| www.967901.com-体彩6十1中奖查询| www.542801.cc-来彩官网-| www.584999.com-足球竞彩怎么能赚钱| www.db57.com-彩神争靠谱吗| www.yf27.com-好彩投可以相信吗| www.26zl.com-体育彩票的区别在哪| www.962.live-杏彩总管29612| 彩票坊www.729198.com| www.769679.com-分分彩后三组三技巧| www.9892.com-汇丰彩票多少年了| www.028699.com-黑彩代理-| www.6762.top-最新版如意彩| www.030077.com-彩票遗漏值研究方法| www.25bt.com-华彩彩票网-| www.03kt.com-排3杀号定胆彩乐乐| www.734.me-博盈彩票怎么样| www.592179.com-珐琅彩瓷器价格| www.716774.com-彩铅鸢尾花-| www.802558.com-福彩3d易点彩票网| www.891003.com-彩票站开业宣传词| www.978534.com-易旺彩票登录| www.db55.com-秒速时时彩开奖图| www.ym01.com-彩票预测网易彩网| www.930874.com-奇门测彩取消法| www.jc3.com-内蒙快三投注| www.53ru.com-河南t乐彩-| www.767644.com-福彩3d酒宝图| www.836342.com-计算器竞彩足球| www.900884.com-赢钱彩官网-| www.968747.com-彩世界下载-| 500彩票www.379477.com| www.35279.cc-福彩输了很多钱| www.86382.com-三彩女装加盟条件| www.586027.com-时时彩个位必中计划| www.257018.com-瑞彩祥云彩票| www.44sn.com-三分彩网计划| www.399638.com-sk彩票平台-| www.795596.com-共享彩票app官网| www.865443.com-福彩计划定位独胆| www.924914.com-三分时时彩规律| www.977078.com-彩礼证据-| www.cai5678.cc-老吉林快三走势图| www.255863.com-吉林快三奖励| www.57294.com-福利彩票怎么福利的| www.58686.com-徐文轩福彩3d讲座| www.cai398.com-快三倍投大忌| www.8216.cn-玖富彩票网-| www.766833.com-福利彩票幸运数字| www.893933.com-福彩3d中奖扣税吗| www.975241.com-体彩资助申请书| www.l01.shop-彩票趋势图怎么判断| www.99mg.com-福彩3d杀码彩宝贝| www.3003.xyz-彩票网络平台| www.561507.com-天际彩专员-| www.17dp.com-成都足彩分析招聘| www.788983.com-足彩竞彩必发指数| www.091341.com-南国彩票论坛区| www.235507.com-广东福利彩票app| www.321498.com-明发彩票下载| www.417736.com-彩53彩网-| www.re4.com-彩票长龙助手| www.880110.com-旺旺彩票-| www.174544.com-快彩app官网| www.521629.com-体彩大乐透奖池奖金| www.657325.com-游戏机彩票攻略| www.16tv.com-秦皇岛福彩快三| www.92dj.cc-车彩是怎么玩的| www.976308.com-4万8彩礼寓意| www.gw40.com-体彩3p-| www.07ey.com-超萌可爱卡通彩铅画| www.727.space-宝哥竞彩今晚推荐| www.791749.com-时时彩坑人秘密| www.301802.com-湖北快三号码分布表| www.948772.com-万彩吧二四六下载| 网易彩票www.072wy.com| www.ct24.com-稳定私彩平台| www.tx19.com-彩票网址导航大全| www.03rr.com-快三属于黑彩吗| www.4533.vip-19021七星彩| www.942.bid-七星彩怎样中奖| www.958666.cc-2014年七星彩| www.346123.com-捷豹abc彩票系统| www.568543.com-幸运五分彩是真的吗| www.0877.date-第1彩票报电子版| www.133188.cc-快三多少钱-| www.211308.com-黑彩报案后果| www.271764.com-昨天开福利彩票中奖| www.kw22.com-天天快三靠谱吗| www.973302.com-彩虹岛有手游吗| www.546605.com-体彩退机申请文本| www.n07.org-吉林快三庄家会输么| www.46sm.com-河南福彩手机版下载| www.62lr.com-彩票过滤器怎么回事| www.4727.com-火车站买彩票| www.22537.cc-爱米彩票真挣钱吗| www.72263.cc-福彩胆组方法| www.028950.com-全球彩票下载| www.507557.com-苏宁易购app彩票| www.ef24.com-吉林快三计划图| www.7yw.com-19彩票下载-| www.55723.cc-花生彩票app| www.017431.com-易旺彩票快3| www.j96.org-马来福利乐和彩开奖| www.991554.com-彩吧vip正规吗| www.82ec.com-竞彩5千万大奖| www.5498.tv-福利彩票是加盟店么| www.14671.com-福彩清明节放假吗| www.73038.com-宝彩app-| www.246373.com-江苏省体彩投诉电话| www.507252.com-江苏体育e球彩走势| www.973173.com-彩虹待刷网-| www.1095.xyz-竞彩初赔-| www.92bx.com-互彩宝怎么登陆彩票| www.6322.cc-体育彩票中奖公告| www.393076.com-往年彩票中奖号码| www.55972.cc-网易人人中彩票没有| www.013220.com-福彩开奖时间星期几| www.829160.com-九彩彩票手机版下载| www.937982.com-双彩网彩民论坛下载| www.og92.com-河北彩票11-| www.85ds.com-百事网彩-| www.15125.com-生肖马彩开奖结果| 凤凰彩票www.www.fh1188.com| www.281963.com-时时彩止损技巧| www.660300.com-彩6彩票登录官网| www.10784.com-篮球竞彩500| www.58562.cc-创彩网app下载| www.678161.com-万彩吧手机第一门户| www.fk24.com-彩票奖金计算器| www.hq62.cc-上海快三购买技巧| www.hr87.com-湖北福彩快3今天| www.839044.com-山东福彩中心官网| www.492.in-非法网络彩票赌博| www.903616.com-九龙福彩是不是骗| www.072122.com-大乐彩透-| www.952288.com-中奖彩票app| www.842695.com-公益体彩的意思| www.541567.com-福利彩票杀码|