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.613004.com-彩票双色球日期| www.860210.com-福彩3d奖号-| www.931019.com-体彩七星彩中奖玩法| 天际彩票www.az0908.com| www.168880.com-快三高手经验| www.701908.com-竞彩足球唯彩网| www.ib14.com-江苏快三500| www.96367.cc-河北体彩排三预测| www.082.in-万城彩票真假| www.024546.com-中国彩票破解| www.580519.com-网络彩票监督| www.cai1066.com河北快三专家预测| www.659644.com-智投彩票-| www.751094.com-玩彩票玩的就是心态| www.62629.com-体彩排5开奖结| www.29323.cc-福彩自助售票机加盟| www.889660.com-新凤凰网彩票官方| 易彩网www.36166d.com| www.861512.com-安徽体彩中心电话| www.116979.com-福彩足球-| www.008529.com-胜负彩19043| www.509755.com-国际博彩娱乐平台| www.764797.com-七星彩论坛加急版| www.786664.com-花样快三套路教学| www.ie08.com-体彩3d跨度走势图| www.32ba.com-彩虹简笔画图片大全| www.1222.vip-全民中彩票软件| www.956857.com-欧洲百万彩开奖号码| www.07kf.com-彩票小奖好中么| www.037809.com-49彩票com-| www.27713.cc-体彩门面图片大全| www.586510.com-糖果派对彩金规则| www.14nw.com-19043期体彩| www.wq36.com-彩票趋势吧-| www.05828.com-猎豹团队购彩平台| www.030848.com-中国福利彩票真假| www.0294.org-深圳牛球球福利彩票| www.360603.com-3d彩票水果图| www.795028.com-福利彩票趋势图表| www.856679.com-福彩三地预测| www.11623.cc-高频彩计划客户端| www.25424.com-彩铅人物简笔| www.784307.com-体彩排列五预测| www.937259.com-彩票中奖率最高省份| www.fb71.com-快彩平台骗局揭秘| www.827311.com-高频彩是赌博| www.892999.com-kk彩票网-| www.964650.com-七星彩周公解梦数字| www.cai5644.com吉林省福彩快三| www.76511.cc-六十种珍贵彩票| www.576217.com-彩票秘籍是真的吗| www.544997.com-3d彩票中奖票样图| www.610860.com-足球竞彩比分计算器| www.678345.cc-必胜体彩店app| www.751422.com-彩票站最高邀请码| www.781491.com-今晚竞彩有几场| www.856258.com-体彩都有什么玩法| www.928932.com-中福彩票黑平台| www.982651.com-天天中彩票福利版| www.gp1.cc-168彩票.com| www.590162.com-彩票今日3d图纸| www.822905.com-七星彩开奖直播软件| www.005462.com-45111彩民论| www.888827.com-今晚七乐彩机选号码| www.27172.cc-快三大小和值计算| www.8617.xyz-什么是彩视和微电影| www.328018.com-c58彩票app-| www.03682.com-应不应该买彩票| www.581971.com-网上玩彩为什么总输| www.987963.com-全能中彩票-| www.cw08.com-原快三助手下载| www.732326.com-竞彩足球新浪爱彩| www.94920.com-彩票押大小骗局| www.103052.com-广东好彩2开奖结果| www.166850.com-湖北福彩k3走势图| www.279009.com-吉林省彩票快三| www.114117.com-香港快三有哪些| www.338147.com-dd福彩讨论专区| www.554901.com-网上彩票技巧与方法| www.715395.com-福彩3d直选技巧| www.848799.com-汪汪时时彩最新版| www.kv9.cc-安徽快三遗漏下载| www.611353.com-竞彩500合买投注| www.880838.com-十分彩官网正规吗| www.083132.com-各省快三走势图| www.9645.cc-彩经网体彩排列三| www.104161.com-好彩柠檬双爆| www.954073.com-好彩双爆价格| 博友彩www.707602.com| www.036878.com-在线做号工具时时彩| www.559260.com-中国福到彩票双色球| www.969699.com-福彩高官-| www.ml01.com-78彩票app下载| www.987359.com-迷彩配什么颜色| www.8143.vip-重庆时时彩5星个位| www.672372.com-彩票世家3d双胆| www.761201.com-结婚彩礼钱是给谁的| www.865527.com-甘肃体彩排列五| www.919722.com-河北快三预测送一柱| www.974861.com-海南七星彩论坛梦册| www.p80.cc-六冠彩票能提现吗| www.032.win-19043期7星彩| www.990015.com-中国彩吧更懂彩民| www.hs46.com-百盈快三破解器| www.8ha.com-微彩提现什么时候到| www.64fc.com-彩票站微信卖彩票| www.cp1516.com-福建福彩快3走势图| www.132767.com-哪种彩票app好| www.008601.com-胜负彩19022期| www.109221.com-百彩网天空-| www.255813.com-福彩二十选五走势图| www.415677.com-红树林国际玩彩平台| www.552950.com-kb彩票-| www.607962.com-澜沧彩票中大奖| www.736677.com-上海市福彩中心地址| www.831053.com-黄鹤楼迷彩烟支| www.911600.com-乐彩商城app| www.988498.com-手机彩票投注| www.vn3.com-福利彩票被查| www.wq33.com-3d时时彩走势| www.583469.com-中彩股份北斗传媒| www.127188.com-森系星空鹿水彩| www.523059.com-五百竞彩即时比分| www.939615.com-福彩坊官方网站| www.019052.com-福彩双色球苏州| www.129705.com-七乐彩走势中彩网| www.33013.com-吉林快三97信誉群| www.cw60.com-必赢彩票下载app| 杏彩www.00840y.com| www.586200.com-微彩吧苹果下载版| www.2879.cn-天空与彩票免费大全| www.8165.net-七星彩买复式价目表| www.38282.com-七星彩专家荐号| www.030764.com-微信骗你买彩票| www.101474.com-足彩竞彩500| www.780798.com-彩客网比分直播现场| www.49th.com-人人彩票怎么充值| www.993.me-香港新2彩-| www.31js.com-昨天福彩开什么| www.972388.com-福彩3d排列三魔图| www.006249.com-彩06app-| www.1247.vip-快三中多少-| www.10414.com-皇帝彩票网站| www.74022.com-p3双彩图-| www.595361.com-彩票中奖领取| www.665110.com-彩霸王2018-| 天天彩票www.54968f.com| www.898828.com-北京福利彩票双色球| www.209725.com-大发快三手机购彩网| www.283527.com-买彩票几位数| www.664534.com-油性彩铅风景效果图| www.718572.com-关于彩虹的唯美句子| www.775508.com-福彩快3速查表图片| www.826606.com-腾讯分分彩中奖技巧| www.006934.cc-乐彩app靠谱吗| www.085747.com-快彩是基诺型彩票吗| www.950187.com-体彩三天必出胆码| www.fe7.cc-分分彩最聪明的玩法| www.px10.com-彩票害死人最新消息| www.46uf.com-经营彩票站技巧| www.652726.com-彩票一般几点钟开奖| www.640016.com-大通彩票官网网站版| www.737276.com-众彩网子墨预测| www.807295.com-香港老板彩霸王|