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.5623.com-彩票托都是美女| www.57335.cc-七星彩大赢家| www.057932.com-彩票大小单双| www.155747.com-好彩客安卓版本| www.256767.com-微彩下载安装| www.341806.com-福彩3d牛彩冈图迷| www.444781.com-呼市彩票中心| www.551178.com-现在不让合买彩票吗| www.678553.com-安徽快三现场开奖| www.771371.com-彩虹6号怎么玩| www.877835.com-台湾5分彩官方网站| www.959132.com-江苏快三漏洞破解| 百姓彩票www.bxcp3.com| www.jb38.com-中国足彩网踩踏视频| www.l98.club-什么是七乐彩票| www.56wv.com-湖南省体彩中心电话| www.0914.cn-福彩追号技巧| www.05027.com-优彩网怎么样| www.56127.cc-彩世界app官网彩| www.007950.com-体彩初几开奖| www.086998.com-wfcp五福彩-| www.163480.com-中彩网平台兼职赚钱| www.303779.com-鑫彩国际彩票怎么样| www.383927.com-九彩洗衣液骗局黑幕| www.528113.com-赢彩王软件可靠吗| www.620775.com-福利彩票26期号码| www.700860.com-开户彩金套利教程| www.787197.com-支付宝买世界杯彩票| www.871320.com-彩71彩票网-| 大赢家彩票平台www.320160.com| www.kf01.com-福利彩票奖金多少| www.l09.cn-棋牌彩票新平台| www.50rq.com-足球彩票缩水| www.0142.win-色彩构成综合作业| www.01278.com-明天快三开奖结果| www.61223.com-江苏快三和值全买| www.025445.com-徐文轩彩票预测网| www.108578.com-速盈彩票安全吗| www.183807.com-一分钟快三-| www.262129.com-看快三用什么软件| www.383912.com-福利彩票怎么考试| www.513932.com-福彩休市和开市| www.590882.com-奔腾彩票合法吗| www.670653.com-彩票软件手机版大全| www.757567.com-信博彩票是假的吗| www.879699.com-银川仟彩摸吧乱不乱| www.970232.com-甘肃福彩快三遗漏号| www.bw56.com-九州彩票新快3| www.vh94.com-网上彩票正规平台| www.15bq.com-体育彩票的行业前景| www.543.top-自助彩票投注机| www.4811.cn-彩虹六号台词| www.05695.com-彩61-| www.53583.com-时时彩官方开奖平台| www.001388.com-彩客网竞彩足球开奖| www.076627.com-足彩对阵-| www.142844.com-亚博彩票登录网站| www.222294.com-彩票系统破解软件| www.299982.com-奥客网足彩比分直播| www.382897.com-彩票一加一-| www.603532.com-三晋福彩3d-| www.678153.com-3d新彩吧牛彩网| www.760489.com-福星彩历史开奖记录| www.872535.com-重庆体彩官网| www.957433.com-连中彩票软件靠谱吗| 大赢家彩票网www.178329.com| www.hh88.com-u9彩票平台合法吗| www.zm86.com-彩神8下载ios| www.28ti.com-境外网彩-| www.0760.me-易彩log-| www.7375.pw-学校彩票公益金| www.24299.cc-澳洲时时彩后三计划| www.69573.com-福彩3d今天试杌号| www.055174.com-长春打击黑彩| www.137394.com-快三彩票qq群| www.215573.com-买生肖属于什么彩票| www.290707.com-我发现彩票有规律| www.364008.com-福彩布衣精华图| www.455266.com-皇冠国际彩-| www.546782.com-体彩移机申请怎么写| www.681302.com-豪彩娱乐客户端下载| www.761601.com-体彩网排列五走势图| www.863046.com-晚上有开福利彩票吗| www.932024.com-彩钢围挡单价| www.986722.com-一号彩票网官网下载| www.ay4.cc-新浪足彩-| www.nr53.com-中国体彩吉林快三| www.97.me-博大彩票是骗局吗| www.400.gg-手机发彩网网址| www.4880.biz-盐城人中彩票九千万| www.04480.com-微信提现赚钱彩票| www.50328.com-足球彩票开奖及奖金| www.95607.com-彩票公益金暂行办法| www.060079.com-智博彩票app| www.262175.com-猫彩-| www.349579.com-河北省彩票兑奖在哪| www.433246.com-彩虹堂手机版下载| www.526703.com-八喜彩票官网| www.628722.com-新彩xc365下载| www.695191.com-江苏福彩老快三| www.772316.com-时时彩票助手手机版| www.869833.com-彩票开奖视频道| www.951061.com-新彩票网走势图首页| www.995947.com-佬牛足彩18085| www.km1.com-安徽快三官方下载| www.oy36.com-快三最多中奖多少倍| www.9ua.com-微博彩票游戏下分| www.63ue.com-体彩3d开奖结果l| www.0230.wang-时时彩中奖多少钱| www.8152.loan-博彩qq群号-| www.27189.cc-新二彩票app下载| www.67821.cc-公务员彩票-| www.038978.com-时时彩助手旧版下载| www.123871.com-风彩还是风采| www.192782.com-彩票机选会中奖吗| www.261803.com-皇都彩票网址| www.365195.com-港彩投中心-| www.450605.com-数字3彩票开奖号码| www.537176.com-澳洲彩票开奖在哪看| www.638617.com-竞彩销售点-| www.719559.com-河北快三查询| www.794307.com-北京快中彩奖池| www.866993.com-福彩中心放假吗| www.930795.com-满彩堂登录-| www.974694.com-排列三杀号2元彩票| www.kb71.com-广西快三站点编号| www.b64.cc-高仿彩票机-| www.26sg.com-东莞福利彩票查询| www.681.website黑彩刷流水赚百万| www.4166.in-彩虹6号glaz| www.9046.org-头彩网app-| www.55827.cc-黄金8彩票网可靠吗| www.96683.cc-湖南龙山彩票事件| www.055234.com-北京彩票票面| www.151198.com-3d彩票投注技巧| www.230935.com-免费彩票网址大全| www.297114.cc-今天福彩3d谜语| www.360694.com-预感彩票要中| www.438912.com-彩票二维码下单| www.526636.com-世界第一彩票| www.648584.com-福彩3d走势图查看| www.728108.com-体彩排列五在线投注| www.793058.com-绵阳福彩彩票加盟| www.862890.com-彩票挂机软件教程| www.920171.com-3d彩票走势图连线| www.972727.com-彩铅手绘入门教程| www.ch66.cc-彩吧3d图谜第二版| www.rv44.com-牛票票彩票官网| www.01ez.com-彩虹歌词羽泉| www.64cn.com-360彩票对比| www.0066.org-彩票有些什么类型| www.7420.cn-附近竞彩投注站| www.18483.com-京彩彩票网-| www.55823.cc-彩票机选一注双色球| www.95499.cc-中超体彩-| www.044158.com-甘肃快三两码遗漏| www.218989.com-博众时时彩软件下载| www.282549.com-重庆时时彩稳定盈利| www.368388.com-落日余晖彩铅画教程| www.450070.com-时时彩012路表| www.530737.com-19年80期福彩| www.633996.com-云南七彩阳光教育| www.712660.com-99彩登录网站| www.779528.com-哪种彩票真实|