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.71yh.com-e球彩中奖概率| www.5777.com-助赢时时彩计划官网| www.32182.cc-k彩平台是坑钱的么| www.83358.cc-入门买什么彩票最好| www.402377.com-dd彩票安全吗| www.838905.com-竞彩足球对冲赚水钱| 彩82www.135125.com| www.58090.com-彩票有官方app吗| www.422703.com-乐乐彩票真假问题| www.730812.com-中福在线是什么彩票| www.938561.com-共赢彩票计划| www.np12.com-福彩3d手机版预测| www.824.date-新浪彩票视频直播| www.46451.com-时时彩走势图助手| www.825378.com-竟彩猫-| www.911381.com-湖北快三选号图| www.981815.com-福彩61中奖查询| www.aq73.com-遵义市福利彩票中心| www.sr35.com-新浪彩票3d-| www.08ix.com-体彩开机号号| www.990079.com-高频彩怎么拉人| www.iz52.com-网上可不可以买体彩| www.454123.com-彩吧怪字怪帖| www.24cp.com-彩带拉花-| www.5116.net-天津七星彩如何中奖| www.36232.cc-132彩票网-| www.3389.cm-彩金好还是黄金好| www.849095.com-买时时彩软件| www.9911.website下载鸿博彩票软件| www.029964.com-彩票随机原理| www.263133.com-中国体彩官网首页| www.484078.com-体育彩票下载官网| www.657054.com-彩票二维码有什么用| www.894633.com-一等奖彩票图片| www.31uw.com-彩虹龙卷风图片| www.16163.com-时时彩qq计划群| www.185988.com-云南时时彩开奖结果| www.376845.com-彩票2019036| www.651768.com-最大的彩票平台| www.816988.com-中发彩票是黑平台吗| www.39383.cc-彩票app分分彩| www.308749.com-加盟福利彩票投注站| www.522236.com-中国彩票计划五分彩| www.8183.bid-七乐彩单式7个数字| www.169535.com-快三开奖甘肃| www.319647.com-昨晚体彩开奖结果| www.574190.cc-彩票类app苹果| www.664764.com-多彩贵州网黄平频道| www.740530.com-澳门彩票macau| www.812866.com-如意彩票正规吗| www.882297.com-中福快三彩票平台| www.958187.com-本期七星彩头奖| www.cp4858.com-福利彩票的玩法介绍| www.nr14.com-内蒙古快三和值图| www.776937.com-快三拉花教学| www.862729.com-天天彩选四走势图| www.929340.com-地方彩票开奖的网站| www.984879.com-长城彩票是什么| www.ca62.com-湖北快三今天推荐| www.150055.com-中国甘肃甘肃快三| www.l93.cn-天天爱彩票安全吗| www.071632.com-嘉兴福利彩票店转让| www.133192.com-猫彩绘-| www.778410.com-彩乐网址是多少| www.557464.com-亲子彩虹伞游戏教案| www.36718.cc-澳门高频彩票| www.96463.com-竞猜型体育彩票| www.9669.loan-双色球乐园彩票| www.268913.com-彩票争霸vl-| www.0763.date-第九彩票官网下载| www.076119.com-凤凰彩票全天计划| www.35zo.com-福彩3d正版一点通| www.733151.com-快三玩法秘籍大全| www.49328.com-齐鲁彩票双色球开奖| www.948001.com-彩宝贝杀号定胆红球| www.eu22.com-彩神8靠谱吗| www.319561.com-彩民福地-| www.422382.com-9968彩票手机版| www.27527.cc-3d试机号宝彩| www.014634.com-能买七星彩的软件| www.397741.com-七星彩2281期测| www.948485.com-彩运8平台是真的| 易彩网www.36166s.com| www.593099.com-彩虹的重力小说阅读| www.972428.com-彩铅绘画动漫人物| www.513165.com-淘彩赢邀请码| www.37611.cc-8888彩票极速| www.up16.com-爱快三-| www.396852.com-万国彩票被黑了| www.3330.com-南方双彩2走势图| www.034177.com-nba体彩结果| www.225662.com-时时彩骗局举报方法| www.227533.com-快三秒饮品-| www.348021.com-彩虹的约定节目串词| www.60615.com-七星彩南国彩票头尾| www.444350.com-天际彩票注册网址| www.470067.com-足彩也是赌博吗| www.593510.com-体彩七位数中奖说明| www.744141.com-重庆福彩抽车查询| www.858579.com-竞彩规律-| 双彩网www.627012.com| www.506225.com-彩虹团队微商骗局| www.646693.com-世界真正职业彩民| www.819249.com-玩彩票高手-| www.947427.com-新彩吧网络图迷画迷| 汇发彩票www.hf5882.com| www.0504.xyz-山东七乐彩开奖结果| www.550855.com-彩站宝客服电话| www.712688.com-网赌快三是真假| www.852879.com-河内彩玩法-| www.959898.com-快三单挑一码| www.b96.club-大发快三怎么看| www.48jj.com-天际彩票注册| www.675356.com-新浪彩药网-| www.01as.com-彩票假期-| www.306425.com-彩688-| www.505594.com-什么是易彩票| www.655945.com-小财神彩票论坛网| www.799309.com-福彩钱庄-| 奔驰彩票www.54591.com| www.894165.com-彩票表情包图片大全| www.964261.com-18099期足彩| www.hd6.cc-爱彩乐快3开奖结果| www.06767.com-免费下载体育彩票| www.962159.com-福利彩票最新规定| www.33653.cc-最新专家说彩| www.cai4440.com新时时彩组六胆拖| www.ji73.com-中国福彩网彩种| www.zw95.com-河南七星彩开奖时间| www.37ky.com-足彩欧亚指数解读| www.09874.com-下载天天彩票app| www.45620.com-重庆市时彩开奖结果| www.365804.cc-彩铅平涂法技巧图解| www.480062.com-体育彩票奖池余额| www.545057.com-福彩丹东全图| www.076855.com-江苏省福利彩票地址| www.034975.com-坤彩股份-| www.225153.com-app宝马彩票| www.317052.com-618彩票官方网站| www.8321.in-体彩代销费结算| www.28482.com-合发彩票娱乐平台| www.699158.com-花下彩票-| www.55375.cc-国外时时彩犯法吗| www.983641.com-青海福彩中心在哪里| www.25pp.com-线上最大彩票大全| www.57331.cc-台湾福彩总站| www.008578.com-彩票api有什么用| www.079577.com-竞彩篮球让球玩法| www.71813.com-购彩堂是骗人的吗| www.542848.com-彩票怎么中奖几率高| www.694483.com-江苏球彩票-| www.799799.com-快三湖北开奖| www.887970.com-彩票推广-| www.43zx.com-出彩的含义-| www.40659.com-亚彩会账号注册| www.917879.com-彩虹宝宝音频| www.36mz.com-七星彩近30期走势| www.5918.in-彩礼钱超过多少违法| www.556502.com-全部天天彩票下载| www.15223.com-彩库宝典最快报码| www.112936.com-广州鸣彩传媒官网| www.292342.com-彩神uu-| www.548669.com-137彩票网-| www.893123.com-超级彩票-|