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天

知道了
1分快三 www.rw07.com-快三输了能回血吗| www.670454.com-今天开奖七星彩| www.763311.com-福建省福利彩票兑奖| www.550312.com-华夏彩票苹果系统| www.038166.com-福彩3d中奖扣税吗| www.mg3.com-360彩票快三| www.946881.com-快频彩套利-| www.aa57.com-怎么看彩票走势图| www.15hr.com-福彩杀号家彩网| www.3142.vip-台州体彩中心电话| www.98665.cc-投入住比例彩客| www.530253.com-家彩网论坛首页| www.85584.com-福彩双色球资深专家| www.5816.biz-玩彩平台信誉排行榜| www.774711.com-七乐彩几个号能中奖| www.908426.com-彩票七星彩-| www.974934.com-彩票查询结果七星彩| www.c9.com-送彩金彩票-| www.xp87.com-35期七乐彩-| 尊彩www.083036.com| www.h92.club-七乐彩的中奖概率| www.959028.com-美国彩票强力球图| www.cai3666.com湖北快三今日开奖| www.e44.com-123体彩-| www.922363.com-福彩机过户流程| www.992165.com-时时彩独胆稳定方法| www.gx11.com-彩票大全360| www.505558.com-腾讯福彩3d开机号| www.610128.com-彩票都有几选几| www.688930.com-彩神通手机软件下载| www.769288.com-足彩258下载| www.853495.com-海南私彩几点开奖| www.949116.com-高频彩英国快乐彩| 亚洲彩www.68568h.com| www.jo54.com-网赌套取彩金可靠吗| www.768242.com-高频彩种行业赚钱| www.850307.com-腾讯五分彩官网下载| www.920156.com-彩票开奖源定制| www.983858.com-河南体彩领奖流程| www.vc7.com-福彩快三河北的最坑| www.058904.com-小白彩票官网| www.858694.com-快三14和值-| 千百万彩票www.qbwc5.com| www.806922.com-废彩票纸回收| www.893388.com-超级七乐彩助手| www.964664.com-竞彩足球竞彩网| 博通彩票www.606647.com| www.mj99.com-青海快三预测一定牛| www.33226.cc-福彩中4个号多少钱| www.028202.com-快乐网彩票是真是假| www.136255.com-易彩堂主页下载| www.263609.com-盈彩-| www.387926.com-下彩彩票apk| www.542814.com-快三信博彩票| www.673710.com-古建亭子彩绘图案| www.757092.com-临时福建彩民论坛| www.835616.com-买彩票用什么软件好| www.907578.com-福彩p六二开奖结果| www.972908.com-日彩网是骗局吗| www.kb10.com-黑龙江大庆快三| www.v13.me-足彩怎么买外围赛| www.46of.com-东方分分彩-| www.467056.com-足彩比分最准预测网| www.914695.com-59彩票官网-| 大赢家彩票www.5086a.com| www.og96.com-江苏福彩3d开奖| www.62lf.com-中国彩吧助手走势图| www.3830.biz-福彩3d小熊猫图迷| www.33997.cc-新浪彩票、新浪网| www.005664.com-快彩网骗局揭秘| www.242478.com-广西快三冷热号| www.407980.com-安装够力七星彩| www.699031.com-d9彩票下载软件| www.867841.com-七星彩36期预测| www.981846.com-尊彩网-| www.oc59.com-福彩手机报下载安装| www.60qb.com-足彩11235计划| www.2131.com-体彩19048开奖| www.21166.cc-彩票3d组六走势| www.88194.com-小站宝彩票ios| www.088633.com-天天彩是真的假的| www.193906.com-彩票台北快三正规吗| www.302726.com-七星彩2233-| www.470503.com-乐彩网三d首页| www.220587.com-红彩-| www.916366.com-致富彩官网-| www.832560.com-七彩云端app| www.79nz.com-彩票排列三怎么玩| www.190906.com-人人中彩票-| www.330491.com-足彩让球0什么意思| www.476561.com-乐福彩票邀请码| www.597608.com-尊彩网首页-| www.688007.com-湖南福利彩票中心| www.797374.com-c99彩票com-| www.903147.com-爱购彩大发快3| www.530736.com-时时彩盈利网| www.646363.com-竞彩足球稳定收入| www.32944.com-体彩7数走图| www.13rk.com-山东彩票应用下载| www.53pn.com-炫彩cp稳赚团队| www.947911.com-体育彩票那一年发行| www.cp1348.com-五分快三骗局| www.067698.com-大乐透凤彩网| www.76cs.com-2628彩票骗局| www.014068.com-七星彩第二位杀号| www.147023.com-华夏彩票平台安全吗| www.111296.com-彩吧图库总汇大全| www.279856.com-胜负彩500w-| www.625810.com-鑫彩国际游戏| 幸运彩www.07xyc.com| www.698438.com-彩库宝典官方旧版| www.439987.com-体彩排列五小助手| www.111079.com-转让体彩机-| www.328559.com-彩票天吉网-| www.569753.com-网易重庆时彩时彩| www.753402.com-七星彩开奖结里| www.361628.com-嘀嘀彩票是正规的吗| www.475008.com-重庆时时彩任选四| www.577026.com-好彩头平台官网| www.690082.com-爱彩乐陕西十一选五| www.819257.com-非你莫属彩票哥求职| www.941006.com-彩票推广拉人话术| www.cp0731.com-快三骗局揭秘江苏| www.b77.cc-抚州体彩中心电话| www.95mu.com-星际彩票不让提现| www.5644.xyz-乐玩彩票合法吗| www.44214.com-海南7星彩开奖结果| www.052192.com-彩票合买怎么计算| www.176262.com-幸运快三在线计划| www.dd34.com-41亿彩票-| www.79773.cc-银川体育彩票电话| www.096619.com-彩票到哪里兑奖| www.215256.com-江苏快三预测网| www.297729.com-快三表-| www.369189.com-牛赑彩票-| www.447325.com-竞彩中5000万| www.524782.com-8彩首页-| www.954684.com-中彩网123-| www.gl09.com-快三中奖彩票| www.26kj.com-澳客电脑竞彩版| www.3173.cc-福利彩票3d好难中| www.007979.com-仟喜彩票江西3块| www.159740.com-随机彩票中奖几率| www.310036.com-延吉体彩中心在哪里| www.511068.com-彩虹张惠妹歌词| www.964460.com-足彩现场直播比赛| www.919.red-银丰彩票平台骗局| www.681742.com-微信提现的彩票平台| www.13ar.com-8亿彩新版下载| www.298462.com-辽宁快三一天多少期| www.590922.com-中彩堂论坛-| www.807147.com-足彩二串一稳赚技巧| www.899297.com-c81彩票app-| www.991958.com-彩票都那几个数号出| www.461.loan-3d杀号定胆彩票| www.75320.com-九五彩票网站| www.233322.com-吉林快三稳赚技巧| www.361939.com-乐透啦彩票正规网站| www.554592.com-体彩术语售常用术语| www.689651.com-三分赛车彩票规则| www.ns8.com-体彩第19035期| www.026523.com-高频彩票概率学| www.1506.me-彩虹儿童歌曲| www.531722.com-彩票gg网页版|