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.42qi.com-得彩近十期开奖号码| www.646722.com-小鹿网络时时彩计划| www.985343.com-nba竞彩网首页| www.wy72.com-新浪彩票快3| www.882968.com-80彩票兼职能做吗| www.02rx.com-刚力彩芽的电视剧| www.219892.com-彩票快彩-| www.789062.com-浙江福利彩票走势图| www.874630.com-彩票带单包赔骗局| www.21ei.com-时时彩接口申请| www.087.bid-鑫鑫彩票是真的吗| www.74384.com-彩票126app-| www.095032.com-布衣彩吧-| www.03375.com-为什么喜欢买彩票| www.84760.com-福彩双色球数据图表| www.858043.com-动物彩票技巧| www.948612.com-彩票公益金申请书| 幸运彩票www.085366.com| www.ns25.com-淘彩网平台是真的吗| www.08tu.com-体彩历史中奖号码| www.880094.com-徐文轩彩票预测网| www.605159.com-加国无忧彩票中心| www.868221.com-福利彩票摇奖模拟器| www.971947.com-湖北万彩票网| www.at41.com-2元彩排列五走势图| www.zz32.cc-上海开福彩店| www.7ac.com-彩票可以做广告吗| www.019913.com-365彩票时时彩| www.098685.com-今日彩票3d图纸| www.489413.com-三星彩票娱乐漏洞| www.609237.com-智彩平台-| www.704849.com-中国足彩胜负彩| www.882398.com-江苏快三和值奖金| www.976471.com-彩票未领奖2018| www.13968.cc-一分快三破解术| www.69494.com-山西十分彩开奖结果| www.36953.com-3d彩票论坛网址| www.99175.com-竞彩视频直播| www.694998.com-竞彩返还率-| www.801660.com-彩票打印不一样| www.8748.vip-安徽快三遗漏查询| www.7gr.com-怎样查彩票-| www.207268.com-手机正规彩票网站| www.321960.com-福建体彩直播现场| www.524520.com-福彩3d组3技巧| www.125714.com-厦门福彩兑奖中心| www.261581.com-河北快三手机投注| www.88su.com-王者彩票357| www.496733.com-国际彩票是什么| www.586839.com-南方双彩网今天| www.660826.com-体彩开奖软件| www.805699.com-九盛彩票是正规的吗| www.898791.com-彩票外卖-| www.966285.com-快三直播开奖| www.cp3376.com-江苏快三怎么玩大小| www.581.space-时时彩公式0369| www.904987.com-西安彩票店转让信息| www.973027.com-彩宝贝网彩票网址| www.cp728.com-我全国彩票开奖查询| www.990837.com-福彩3走势图带连线| www.cs01.com-重庆时时彩注册账号| www.14kn.com-福彩36期号码| www.393928.com-c58彩票网网址| www.966234.com-江苏快三遗漏推存| www.it29.com-浙江体彩大乐透官网| www.68.link-东方彩票真的假的| www.999500.com-大运彩票网址多少| www.54.me-幸运星座彩票下载| www.93lg.com-222彩票网-| www.8089.cc-玩彩怎么规划本金| www.gy09.com-财神彩票合法吗| www.19fi.com-彩仙阁可信吗| www.033970.com-彩票屠龙模式| www.778998.com-3d银海彩报a| www.23.org-梦见彩票中奖不给| www.018915.com-福彩双色球安卓下载| www.141899.com-竞彩猫坑人-| www.231178.com-幸运快三开奖号码| www.044299.com-7星彩预测最准号码| www.756.mobi-时时彩后二和值表| www.296465.com-彩迷兔-| www.359293.com-奇彩娱乐账号注册| www.821908.com-体彩北京十一选五| www.iq52.com-乐乐彩票网-| www.89930.cc-在线信誉博彩公司| www.585078.com-哈尔滨松北好彩酒店| www.47284.com-手机qq如何买彩票| www.957743.com-095彩票-| www.828739.com-彩票616app-| www.413960.com-挂彩造句-| www.569196.com-彩票梯子计划软件| www.1231.space-官方彩票是什么意思| www.696962.com-金鹰团队时时彩计划| www.09856.com-彩票回血-| www.66184.com-体彩排列三胆码杀码| www.047406.com-彩票号码自动生成器| www.90858.cc-体育彩票三位数开奖| www.775064.com-七星彩今天号码| www.8870.vip-牛人买最大复式彩票| www.625018.com-福彩过年什么时候开| www.550628.com-掘金好球彩票app| www.lq44.com-中彩网是真的吗| www.729777.com-彩票中奖的人后来| www.800099.com-天禧彩票-| www.911102.com-快开彩票中奖规则| www.972216.com-印尼时时彩官网| www.cai1755.com彩7app-| www.236883.com-中体彩官网-| www.173982.com-秒速快三彩票| www.2518.cc-彩票app下栈| www.54900.com-厘模式彩票-| www.028067.com-广东福彩36好彩三| www.193752.com-3d彩票口诀-| www.272034.com-308彩票丹麦28| www.368399.com-福彩体彩千禧试机号| www.499976.com-集缘彩票-| www.589932.com-星彩医学美容医院| www.757536.com-睛彩山西百姓春晚| www.853382.com-体育彩票春节停售| www.107122.com-老彩票app下载| www.cv03.com-平台买彩票先赢后输| www.740037.com-时时彩走势360| www.au21.com-粤福彩快乐10分| www.zv21.com-七天彩下载网址| www.52bq.com-寶宝利会彩票登录| www.101152.com-运彩-| www.84197.com-中国体彩加盟电话| www.xb50.com-七星彩1到9的对数| www.83ez.com-彩票对刷流水安全吗| www.828331.com-2019u9彩票-| www.290694.com-白菜网免费彩金| www.vt92.com-惠民彩票平台| www.49ig.com-美国买彩票数学家| www.13rn.com-大发1分快三计划| www.018127.com-时时彩人工计划定胆| www.023344.com-大众彩票ios| www.373856.com-体彩陕西十一选五开| www.96jk.com-高频彩票吧-| www.5089.biz-广州彩票中奖历史| www.37911.cc-购买彩票-| www.92409.com-品素力彩-| www.087663.com-彩票app哪种最快| www.274758.com-极速时时彩万能规律| www.825098.com-快购彩票平台| www.92792.cc-立彩佳美缝剂多少钱| www.078118.com-顺盈彩票是骗局| www.238811.com-淘宝彩票走势图大全| www.997522.com-时时彩源码论坛| www.iq43.com-平台彩-| www.6do.com-豪彩官方邀请码| www.95ko.com-星际彩票平台正规吗| www.254234.com-c58彩票.com| www.1506.me-彩虹儿童歌曲| www.217125.com-五省快三最大遗漏| www.510066.com-577.com彩票| www.517238.com-乐彩票的乐彩论坛| www.4266.in-87彩店靠谱吗| www.3318.in-彩色装饰画高分卷| www.66ev.com-梦见黄牛彩票| www.165056.com-苹果手机彩铃怎么弄| www.261773.com-福彩开奖结果今天| www.347547.com-金彩网正规合法吗| www.411770.com-彩票怎么玩法介绍| www.514655.com-500vv彩票官网|