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.894201.com-彩票49倍下载| www.ie5.com-深圳快乐彩开奖| 500万彩票www.583792.com| www.mj51.cc-彩票平台网站| www.98776.cc-重庆时时彩玩法图| www.2717.org-南京彩票中心| www.18049.com-中国福彩利票| www.88394.com-欧洲彩票大奖| www.111257.com-河北快三3-| www.06ge.com-用手机怎样买彩票| www.128486.com-708彩票-| www.594008.com-商务频道福星彩运| www.02te.com-双色球走势图—爱彩| www.408402.com-福彩3d数字图| 爱彩www.016ac.com| www.1602.net-58快彩送彩金| www.339649.com-彩导航威尼斯| www.611473.com-长春文彩刺青| www.761299.com-彩票147-| www.981439.com-足彩任选九投注技巧| www.611772.com-福彩网上缴费| www.714114.com-彩票资讯大全| www.801633.cc-中国福利彩票图片| www.931717.com-数字型彩票规律| 500彩票www.50026r.com| www.386659.com-凤彩网双色球预| www.384050.com-体彩题库-| www.092402.com-彩经网首页走势图| www.330670.com-大发彩票平台安全吗| www.509781.com-8彩神-| www.71637.com-手机验证码送彩金| www.05pe.com-富鱼网彩票是真的吗| www.401831.com-类似七星彩小说| www.543111.cc-彩票乐-| www.637472.cc-彩虹无人机公司地点| www.925153.com-app旭彩网站| www.uk94.com-内蒙古福彩网站| www.97en.com-含彩金彩票大全| www.7652.loan-正彩彩票下载安装| www.181796.com-微彩app最新版| www.091796.com-大联盟彩票官网| www.317612.com-双色球彩民心得| www.548699.com-海口七星彩画规软件| www.20tq.com-体彩样票有什么用| www.200078.cc-我的彩票开奖结果| www.367158.com-用彩铅画星空的过程| www.63653.com-竞彩足彩比分结果| www.81499.cc-博彩诈骗怎样报警| www.9547.cc-海南彩票开发公司| www.004022.com-彩票大赢家预测号码| www.244363.com-彩票中奖兑奖流程| www.1404.vip-神灯彩票注册| www.977309.com-河南南阳彩礼是多少| www.08381.com-附近的彩票站点| www.453360.com-雅彩彩票可以提现吗| www.317189.com-足彩19039任九| www.458156.com-福彩试机号千禧金码| www.556711.com-彩票时间怎么修改了| www.637474.com-网上卖彩票内部数据| www.568318.com-中国福利彩票3开奖| www.31qn.com-什么彩票星期六开奖| www.7484.cc-彩票九宫魔方公式| www.668172.com-体育彩票技巧推荐| www.00de.com-关于彩虹糖心情说说| www.3104.net-体彩专管员-| www.32120.cc-易彩堂怎么玩| www.175545.com-福利彩票快三走势图| www.311510.com-吉快三走势图| www.389411.com-做福利彩票站赚钱吗| www.503947.com-高频彩背后-| www.576908.com-体彩7星彩怎么玩的| www.104717.com-牛牛网彩票福彩| www.g38.com-七星彩彩宝贝预测| www.qh35.com-好彩蓝莓双爆怎么样| www.203443.com-福彩时时乐走势图| www.979426.com-快三回血贴吧| www.k44.club-快三数据专家| www.619943.com-彩票经验分享| www.ve48.com-和彩-| www.08co.com-初学者临摹彩铅画| www.750061.com-七星彩预测频道网| www.890676.com-倍率高的彩票网站| www.gq0.cc-北京顺义福彩快三| www.4854.vip-全民汇彩票一彩种| www.83832.cc-河南福彩开奖| www.257306.com-微彩吧app可靠吗| www.371315.com-西安天彩粮加盟骗局| www.527052.com-600万彩票冒领| www.580802.com-乐彩七乐彩论坛| www.391685.com-易迅彩票可靠吗| www.728216.com-体彩现场摇奖| www.796241.com-彩票选号书-| www.904298.com-彩票代理能赚钱吗| www.983568.com-彩16苹果下载| www.656542.com-爱彩乐输了二十多万| www.027617.com-易彩堂平台是真的吗| www.103618.com-广东彩灯厂-| www.668841.com-美国人彩票-| www.796440.com-彩票谜语查询| www.920593.com-信博彩票合法吗| 凤凰Vwww.www.fh7557.com| www.111191.com-快乐十分钟彩票软件| www.414034.com-披红挂彩-| www.167565.cc-福彩快3中奖规则| www.360893.com-玩儿彩票-| www.637058.com-谁有时时彩做号软件| www.953274.com-福彩开机号和试机号| www.148.la-沂水彩虹谷-| www.622205.com-五福彩正规吗| www.991193.com-快三安徽开奖| www.866110.com-5星彩-| www.954181.com-吉快三和值单双大小| www.is85.com-大发快三违法吗| www.523027.com-世博彩app哪里下| www.899.space-没有彩排过的戏| www.8589.loan-澳客体彩下载软件| www.0148.com-缅甸彩色宝石| www.2500.tv-刚力彩芽婚纱代言| www.390519.com-福彩3d在线模拟| www.385800.com-精彩音乐汇2013| www.678882.cc-网易彩票直播| www.763138.com-大乐彩-| www.835789.com-顺丰彩票app| www.923488.com-彩票如何坐庄| www.981399.com-网易红彩app| www.ec18.com-台北快三是假的| www.86ei.com-七乐彩2元网走势图| www.236480.com-乐乐彩票一注多少钱| www.cp3929.com-河南快三彩票走势图| www.004781.com-体彩和值遗漏统计| www.73738.com-彩票平台二维码| www.036001.com-彩宝贝百位杀号3d| www.129411.com-网购彩票是骗局吗| www.33kk.cc-足够竞彩比分直播| www.582128.com-中彩在线怎么样| www.489485.com-乐彩工具图-| www.078611.com-彩票开机号和试机号| www.53oy.com-彩票达人下载安装| www.266086.com-快三的投注规则| www.p50.biz-体彩所有玩法| www.ye27.com-大发快三中奖图片| www.957800.com-福彩新代码-| 500彩票网www.895020.com| www.kw60.com-江苏快三是不是有假| www.817802.com-彩票走势图-500| www.886374.com-好运来时时彩苹果版| www.953918.com-瑞祥祥云彩票合法么| 500彩票网www.61655c.com| www.5241.me-彩宝贝手机版下载| www.799969.com-福彩开奖双色球奖金| www.912263.com-河南福彩手机网| www.968954.com-彩神512i喷绘机| www.mq9.com-安徽快三是真的吗| www.sh92.cc-手机时时彩app| www.812698.com-福彩3d曲线-| www.955840.com-彩票是否存在作弊| www.32190.cc-众彩平台下载| www.7bx.com-公司送彩票中大獎| www.444866.com-网上61彩是真的吗| www.545796.com-福利彩票店申请| www.608018.com-福彩申请流程| www.666206.com-航天彩虹股东减持| www.350.net-菲律宾博彩合法吗| www.4325.in-福彩兑奖中心在哪里|