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.20516.cc-大发彩票骗-| www.529229.com-首页热门彩票开奖| www.695591.com-足彩开奖奖金计算器| www.950042.com-380彩票网下载| www.83oj.com-中国彩票七位数| www.77544.cc-竞彩术语-| www.112941.com-体彩助手扫描二维码| www.975475.com-蚂蚁彩票怎么样| www.982042.com-南充体彩兑奖处| www.11086.com-2019足彩软件| www.022950.com-快三刷流水技巧| www.288716.com-竞彩足球补赛怎么算| 亿彩堂www.87668r.com| www.602114.com-黑彩可以提现吗| www.820935.com-彩色砼路面设计图| www.945.me-福彩快三实战讲座| www.6070.cc-汪先生的金口诀测彩| www.026486.com-苹果app博彩下载| www.380629.com-彩票今天的开奖号| www.1879.top-中彩加拿大28| www.152624.com-tt彩票是真的吗| www.237078.com-足彩奖金计算| www.995465.com-足彩冷热表-| www.cj25.com-一分钟极速快三计划| www.567519.com-江苏体彩app| www.781465.com-微彩提现-| www.456136.com-球彩台妹头| www.556457.com-彩票广告图片| www.634557.com-建盏七彩原因| www.950985.com-彩运8是做什么的| 大玩家彩票www.9478y.com| www.553289.com-足彩让负怎么才赢| www.57648.com-电竞博彩app开发| www.028143.com-威尼斯飞艇彩票| www.118799.com-哪个彩票最容易中| www.997429.com-好运彩平台怎么样| www.033996.com-新快三遗漏数据| www.98829.com-江苏快三有赢钱的人| www.82847.com-彩乐乐正规吗| www.827118.com-哪里人喜欢玩彩票| www.zz37.cc-体彩店有刮刮乐吗| www.57wc.com-533彩票网-| www.39878.cc-彩票巴士注册| www.94737.com-福利彩票排名| www.707611.com-时时彩官网开奖| www.582192.com-竞彩足球澳客| www.289494.com-中国彩票的真实性| www.97879.com-三分彩计划官网| www.484458.com-北控国彩传销案| www.636188.com-彩虹六号无人机| www.01258.cc-福利彩票3d彩图| www.gq83.com-好彩彩票合法吗| www.17095.com-足彩如何兑奖| www.062232.com-万彩网会不会被骗| www.217015.com-那个地方玩快三的多| www.513446.com-三分钟时时彩规律| www.727081.com-明彩-| www.582236.com-金鹿彩票官方网站| www.52474.cc-足彩任九投注结果| www.17pq.com-新浪可以买彩票| www.690701.com-彩票购手机客户端| www.051332.com-幸运飞艇双彩网开奖| www.377150.com-168腾讯时时彩| www.576505.com-彩票百度百科| www.718396.com-彩虹色斑-| www.840799.com-福彩在线可以玩不| www.969475.com-欢乐彩网址-| www.bw34.com-大中华彩票站| www.p83.net-彩票网站提现不了| www.238686.com-28彩票拖骗局探探| www.2066.vip-旺旺彩票app网站| www.989770.com-彩民乐阳光探吗图| www.oc41.com-体彩篮球竞猜| www.690106.com-中彩网美媒体擂台赛| www.947366.com-彩票诈骗怎么处理| www.912.website手绘彩铅唯美花鸟| www.593410.com-七彩阳光分解动作图| www.35vq.com-什么是希腊5分彩| www.129026.com-谁能破解腾讯分分彩| www.659474.com-彩票大乐透前几期| www.452395.com-七乐彩选号精准技巧| www.759264.com-三d彩票开奖今天| www.875905.com-彩票走势看法| www.315930.com-竞彩一年挣百万| www.565505.com-九州体育博彩| www.632586.com-快三软件植入病毒| www.718595.com-古风彩虹屁-| www.799675.com-c14彩票-| www.873413.com-彩票有限额吗| www.956076.com-河北快三是合法的吗| 大赢家彩票网www.54400z.com| www.703663.com-北京快三怎么赌| www.618529.com-新浪足彩app下载| www.3ba.cc-彩票中奖还负债| www.279705.com-分分彩里的龙虎是啥| www.517937.com-七乐彩几点停售| www.53oi.com-一注福彩多少钱| www.262364.com-福彩3d彩涂-| www.365190.cc-彩票近期中奖号| www.037298.com-时时彩四星超强缩水| www.331223.com-乐彩大发快三有挂吗| www.666089.com-万字号梦兆册七星彩| www.791845.com-福彩数字三开奖号码| www.952701.com-福彩直播开奖视频直| www.hd4.cc-安徽福彩快三在线| www.212826.com-私彩代理提成| www.298169.com-快三有坑吗-| www.54418.com-大学生买彩票的群| www.900924.com-全国体福彩开奖结果| www.974596.com-易众彩店稳不稳| www.ha4.cc-福彩3d一句定三码| www.220296.com-福彩3d预测分析飞| www.716556.com-彩铅风景画简单漂亮| www.ge97.com-第1彩票app-| www.040190.com-争霸彩票8-| www.302823.com-大富彩票app| www.9685.vip-彩一万下载-| www.78354.com-聚丰彩票5070| www.068587.com-关注彩票哪个软件好| www.893198.com-爱彩乐广东11| www.960910.com-亮了网直播竞彩猫| www.cp3137.com-彩票端十分快三| www.137002.com-快三守号20期计划| www.124844.com-福彩3d字谜图片| www.209965.com-一分快三如何玩| www.4564.biz-最简单的买彩票技巧| www.9090.org-湛江七星彩网投平台| www.36942.cc-彩宝贝杀号定胆| www.504439.com-生活不需要彩排| www.610122.com-古装彩铅画人物图片| www.719135.com-周杰伦的彩虹歌词| www.0601.cm-香港小财神彩票网| www.7537.org-五分彩是统一开奖吗| www.555883.com-飞彩网邀请码| www.350861.com-手机彩膜通用| www.912318.com-聚华体彩店下载| www.356741.com-做体彩销售好做吗| www.942389.com-金福彩票官网| 彩皇网www.61500.cc| www.325265.com-彩票大数定律| www.523.me-时时彩停开怎么回事| www.7708.xyz-四季彩平台下载| www.34883.com-快三守号-| www.014008.com-七星彩和值尾| www.091897.com-京彩集团彩票安全吗| www.984860.com-手机彩票做号软件| www.dp01.com-大大快三平台| www.tg79.com-福彩快3跨度走势图| www.1jf.com-天下第一彩票| www.993323.com-彩票网站是怎么赚钱| www.577124.com-被禁止买彩票的人| www.632263.com-体彩取消票流程| www.691797.com-彩票报纸大全| www.758940.com-微彩网是正规定的| www.811532.com-3d彩票站吧-| www.872640.com-美国超级百万彩票| www.922532.com-竞彩团队招聘| www.994979.com-0500彩票网-| www.cp9193.com-近三十期快三中奖号| www.522276.com-香港福彩网-| www.165436.com-河北快三的结果| www.74677.com-济南彩色本地沥青瓦| www.019172.com-利彩是什么性质| www.120925.com-微信体育彩票合买群|