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.492081.com-广东体彩ⅱ选5| www.119038.com-78彩票是什么| www.935852.com-彩票长龙助手下载| www.022957.com-环球彩票app下载| www.708599.com-彩亿时时彩计划| www.566294.com-慧金彩是什么平台| www.662613.com-七星彩每晚几点开奖| www.759273.com-大中华彩票骗| www.872447.com-什么彩票好玩| www.948276.com-多彩网三地图迷| 幸运彩票www.5095f.com| www.ta23.com-赢彩彩票官网| www.3363.in-足彩过滤软件哪个好| www.61la.com-心脏彩超sv正常值| www.5399.bid-足球竞彩比分计算器| www.57957.cc-体彩七位数玩法规则| www.126457.com-福彩杀码预测| www.8733.loan-体育彩票准直播| www.655714.com-今晚福彩3d开什么| www.828859.com-九彩彩票平台| www.cai4966.com甘肃福彩快3开奖号| www.291951.com-快三所有号码| www.9509.cn-海南七星彩网投| www.5380.cc-上海快三如何看走势| www.72553.cc-f8彩票app-| www.493330.com-中体育彩票了| www.964508.com-微信彩票林老师| www.637013.com-福利彩票即时开奖| www.822962.com-高频彩票网址| 福彩天下www.fcff9.com| www.6175.cm-现在开彩票店赚钱吗| www.806988.com-谁有7号彩票邀请码| www.641616.com-彩票标志-| www.739754.com-爱彩乐福建11选5| www.819978.com-游戏厅刮刮彩票机器| www.892648.com-足彩怎么买比分| www.960417.com-盐城彩民-| 万利www.32123o.com| www.ix13.com-江苏e球彩足球开奖| www.028196.com-谁有彩票代打的路子| 九州彩票www.6769q.com| www.ip70.com-体育彩票22选五| www.w38.bid-彩票256可靠吗| www.280860.com-重庆福彩网-| www.46009.com-内蒙古彩票时时彩| 天下彩www.934680.com| www.hm13.com-快三8期倍投技巧| www.71dc.com-今期六开彩跑狗图片| www.322772.com-全天彩票计划| www.489458.com-福利彩票蓝号有哪些| www.836525.com-高频彩是什么开的| www.956102.com-买彩票的心态| 名门彩www.33997w.com| www.ql11.com-一定牛彩票停售| www.63767.com-竞彩网胜平负| www.066129.com-建彩票平台用多少钱| www.154847.com-竞彩入门基础知识| www.33715.cc-10分钟彩票怎么玩| www.304983.com-体育彩票投注站| www.563362.com-足球博彩看盘网站| www.635418.com-七彩阳光视频全集| www.am16.cc-快三app苹果版| www.xe97.com-七星彩2254-| www.639774.com-彩票牛牛玩法介绍| www.263702.com-官方最好的彩票平台| www.092345.com-江苏快三精准计划表| www.306823.com-世界杯足彩停了零食| www.435321.com-体彩店提成收入| www.280834.com-重庆时时彩77版本| www.388165.com-星空彩票提现| www.0jo.com-彩宝贝3d组选杀号| 网易彩票www.26163s.com| www.444140.com-体彩七星开奖走势图| www.714040.com-天津3d福利彩票| www.990413.com-网上购彩哪个靠谱点| www.kq36.com-五分快三是什么| www.9jy.com-北单购彩大厅| www.85sx.com-天天乐彩票怎么样| www.808083.com-优选彩店怎么下载| www.941059.com-互联网彩票推广语| www.144829.com-足彩推荐分析软件| www.661995.com-竞彩足球害死人| www.wz61.com-上海快三分析软件| www.974948.com-体彩大乐透奖金纳税| www.ju68.com-彩客网快3-| www.10nj.com-排列三彩票下载安装| www.88uq.com-中华购彩邀请码| www.3088.gg-彩票老司机靠谱吗| www.8829.wang-福彩八卦图新版| www.186454.com-百盈快三是什么彩票| www.306596.com-彩票号码都买多少钱| www.415122.com-好彩高手论坛香港| www.509167.com-嘀嘀彩票不能用了| www.132495.com-世界杯竞彩网站| www.599176.com-彩客彩票网站| www.698622.com-中国6加1彩票玩法| www.774101.com-8k彩票有限公司| www.12845.com-福彩7加2-| www.335877.cc-黑彩为什么总是输钱| www.398307.com-体彩排列三正好网| www.870332.com-黑彩票平台都有哪些| www.652661.com-彩贝壳app怎么样| www.001365.cc-雪缘足彩比分直播1| www.078605.com-福彩群英会最新开奖| www.776974.com-查询时时彩历史数据| www.265208.com-广西省快三-| www.507053.com-体彩小红包中奖图片| www.576234.com-开心网彩票走势图| www.655040.com-福利彩票快乐十分| www.46tw.com-体彩大乐透摇奖| www.228393.com-新疆喜乐彩开奖号| www.328609.com-七星彩开奖直播视频| www.396892.com-下载多彩宝-| www.k68.cn-大发云彩票系统平台| www.51869.cc-牛蛙彩票免费大全| www.028566.com-广西快三好运走势图| www.156053.com-好彩平台是诈骗吗| www.16kr.com-时时彩幸运彩| www.086.cc-富东国际彩票| www.6233.in-四不象彩图网址| www.751620.com-80767九号彩票| www.843551.com-哪一个彩票-| www.89gi.com-中国体彩竞猜胜负| www.8669.com-历史福彩开奖| www.614603.com-龙胜彩票游戏| www.702578.com-七星彩中三个数| www.802987.com-长沙福彩大奖| www.871924.com-彩票每月任务| www.mz53.com-彩票巴士app下载| www.185.cm-福彩中奖原理| www.395172.com-彩虹秒赞平台| www.669451.com-蓝海娱乐彩票赵坤| www.798048.com-大彩鲸时时彩| www.978937.com-随时随地畅玩彩票| www.20og.com-网易彩票机选双色球| www.886507.com-购彩app停售| www.969563.com-酷彩美国-| 大赢家彩票平台www.376163.com| www.lf33.com-万购彩下载-| www.d08.top-彩票开奖结果排列三| www.26wb.com-彩票预测报纸| www.704.cm-足彩总进球-| www.926802.com-彩票需要几位数| 吉利彩票www.66376g.com| www.654150.com-彩微传-| www.763795.com-足彩咖下载-| www.842934.com-福彩与慈善总结| www.900072.com-51彩虹聊天软件| www.967606.com-彩票快三一定牛预测| www.cai89.com-江西多乐彩开奖| www.264921.com-手机版甘肃福彩快三| www.608991.com-体彩7星彩最高奖金| 华彩www.71399z.com| www.pm52.com-彩涂铝板用途| www.248576.com-今日福彩中心开机号| www.36567.cc-奥门彩票网-| www.019088.com-快三组合对应码打码| www.759781.com-福彩3d谜底图| www.573116.com-彩指什么生肖| www.631055.com-看彩票开奖大乐透| www.212221.com-绝密彩票网166| www.282624.com-7星彩玩法-| www.316229.com-体彩店怎么开| www.399568.com-彩票分析新版|