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天

知道了
9彩注册 www.014755.com-猜冠军彩票真的假的| www.835298.com-炫彩棒画图片大全| www.960554.com-快三和值走势图看法| www.jl18.cc-福利彩票选号| www.8074.me-水彩大师约瑟夫| www.82847.com-彩乐乐正规吗| www.157234.com-易彩票网是合法的吗| www.507194.com-浙江体彩机选| www.725979.com-3d是福彩的吗| www.6913.biz-买彩票中奖视频| www.408873.com-纪梵希彩妆官网| www.144984.com-福彩3d必出码绝招| www.378211.com-25日体育彩票开奖| www.786368.com-时时彩有赢家吗| www.057329.com-彩神怎么样-| www.297193.com-乐购网彩票是真的吗| www.15655.cc-头彩彩票网登录| www.019497.com-青海快三购买技巧| www.517671.com-大胜彩票安卓最新版| www.789131.com-竞彩14场二等奖| www.53324.com-时时彩预警专家| www.iq85.com-众彩网排3专家预测| www.859752.com-⑧彩票论坛-| www.372973.com-何明七乐彩推荐| www.539490.com-彩票机过户-| www.981404.com-竞彩国家官方网站| www.835627.com-福彩3d双色球字迷| www.oc13.com-极速时时彩走势图| www.q76.cn-长春双阳黑彩| www.6263.me-vip.668彩票| www.159195.com-彩票55是黑平台| www.553102.com-香港′彩富网| www.753228.com-9d彩票正规吗| www.220369.com-大发快三外挂| www.c44.bid-三六零彩票开奖| www.854922.com-爱彩是正规的吗| www.nk98.com-今日足彩推荐| www.4122.cc-彩虹8无人机| www.715851.com-爱购彩票网址| www.087353.com-7星彩复式计算器| www.959509.com-彩吧图库彩吧图库| www.562906.com-福彩3d彩票图案| www.25456.com-教你彩铅画风景| www.854796.com-所新浪竞彩比分直播| www.198848.com-10选5彩票-| www.391120.com-四川彩票快乐12| www.526249.com-私彩代理结构| www.96124.com-彩票中奖金额上税| www.123696.com-排列3乐彩网| www.3679.biz-休彩排三技巧| www.ur67.com-鸿彩网app-| www.318481.com-福彩排列七开奖规则| www.811221.com-国家福利彩票快3| www.101873.com-足彩任九场预测| www.i88.cc-福彩条件预测专区| www.x24.org-5分彩定位胆| www.653879.com-江西快三跨度五百期| www.718932.com-马来分分彩走势图| www.lj12.com-2020彩票下载| www.422574.com-附近体彩销售网点| www.293769.com-网投彩票骗局| www.d40.biz-陕西体彩十一选5| www.59015.com-中彩易双色球软件| www.166919.com-江苏快三中奖规则| www.033599.com-彩站宝店主使用教程| www.383434.com-体彩排列五所猜号码| www.873374.com-网易彩票在线购买| www.bo14.com-一分快彩app| www.689573.com-9号彩票app下载| www.883985.com-来彩020彩票| www.001616.cc-彩种最多的平台| www.5566.net-体育彩票大乐中奖人| www.793533.com-易彩官方登陆网站| www.75111.com-彩票属于什么职业| www.849688.com-腾讯三分彩稳定计划| www.477995.com-浦发积分换彩票| www.964751.com-分分彩怎么杀跨度| 彩吧www.856458.com| www.pd88.cc-排7福彩-| www.80ah.com-彩票计划导师能信吗| www.65977.cc-广州彩烟-| www.39vy.com-全国彩礼最高的省份| www.440119.com-镇江中彩票-| www.302535.com-七星彩软件下载| www.519871.com-用手机买彩票的软件| www.32515.cc-好运快三游戏| www.123102.com-酷彩中国专柜| www.16234.com-好彩客怎么样| www.kb71.com-广西快三站点编号| www.293853.com-福彩三地黑圣手字谜| www.ac1.cc-河南快三预测号码| www.8921.biz-彩票拉人方法大全| www.719811.com-竞彩篮球玩法介绍| www.12328.com-955彩票官网| www.825939.com-彩票手机投注站下载| www.048077.com-网络福彩举报| www.328618.com-河北体彩七星彩| www.504205.com-玩彩票啥意思| www.06rp.com-彩神攻略-| www.542211.com-体育彩票销售网点| www.345938.com-足彩十四预测分析| www.914648.com-快三和值倍率| www.72408.com-奔驰彩下载-| www.556123.com-国乐彩注册-| www.41205.com-悟空彩票-| www.807117.com-广州收购过期彩票| www.426406.com-旭彩柔性真瓷王| www.k37.org-国家合法的彩票网站| www.675785.com-新浪彩票名家大乐透| www.94561.com-竞彩奖金优化好吗| www.388618.com-购买快三河北| www.102364.com-台湾福彩官方网站| www.665312.com-七乐彩中奖历史| www.472487.com-福彩晚秋和值字谜| www.694902.com-亚洲最大的彩票网站| www.94yt.com-彩票套利交流| www.95516.com-中国体育彩票活动| www.42ds.com-体彩是不是骗局视频| www.sc6.cc-大发快三计划网页版| www.634676.com-茶杯养出七彩| www.872320.com-贵阳市体育彩票中心| www.818408.com-非你莫属彩票| www.932208.com-七星彩三字现规则| www.818808.com-体彩竞彩查询结果| www.126409.com-泰安体彩大乐透| www.63mp.com-网易彩票好提现吗| www.lr45.com-中彩网是什么真的么| www.875133.com-酷彩购彩票靠谱吗| www.6650.cm-众博彩票zdc| www.355902.com-手机哪里能买彩票| www.rh68.com-北京时时彩官网首页| www.718396.com-彩虹色斑-| www.565027.com-欧客彩票-| www.107518.com-3d彩票破解-| www.707742.com-网上有人带人玩彩票| www.2063.cn-加拿大彩票开奖| www.447585.com-足彩投资策略| www.735961.com-彩虹宝宝玩具| www.wu54.com-彩18彩票-| www.628.red-e彩在线彩票注册| www.314091.com-3d中彩网开机号| www.797251.com-八八彩票官方网| www.236058.com-首页新彩票走势网| www.00bf.com-二等奖彩票-| www.211002.com-吉林省福彩中心官网| www.335254.com-网易世界杯彩票| www.572889.com-亚博彩票官网| www.118875.com-彩票可以无限追吗| www.385316.com-体育彩票1360亿| www.8588.cc-排列三专家彩乐乐| www.102235.com-不停售的彩票app| www.270332.com-888彩票网安卓版| www.al76.com-7星彩近500期| www.548766.com-彩播和绿播的区别| www.877103.com-百姓彩票跑路| www.62048.cc-彩票巴巴-| www.251002.com-中彩在线平台可靠吗| www.428855.com-七彩奖开奖走势图| www.593236.com-7彩阳光慢动作| www.717209.com-彩铅画优势-| www.858930.com-上期彩票中奖号| www.6513.net-快开彩票为什么调整| www.828892.com-九彩彩票官网首页| www.678298.com-彩票佣金结算|