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天

知道了
58福彩 www.3312.net-彩票走势图制作代码| www.215234.com-彩票资讯预测| www.262016.com-福彩开奖结果是| www.411555.com-怎么看彩票结果| www.037985.com-金牛彩票官网| www.490448.com-彩票选购技巧| www.392183.com-彩票弃奖新闻| www.528828.com-竞彩实体店怎么申请| www.1933.tv-黑客彩票-| www.22216.com-今日彩票是骗局吗| www.78656.cc-福彩造假事件| www.3258.pw-彩神应用软件违法吗| www.761471.com-好彩堂玄机资料大全| www.857548.com-江苏老快三跨度振幅| www.923660.com-体彩骰子-| www.986094.com-福利彩票店提成八点| www.uc4.cc-今晚体彩开奖号| www.161054.com-那个彩票平台送彩金| www.877946.com-彩票计划大师| www.816994.com-中发彩票怎么回事| www.919186.com-3分快三计划软件| 凤凰彩票www.66652f.com| www.44833.com-杭州体彩十一选五| www.438196.com-彩票做代理-| www.297195.com-山东彩民论坛| www.445644.com-三d彩民乐图| www.57233.com-怎样看快三规律| www.qb33.com-新彩票软件-| 网易彩票www.099wy.com| www.if42.com-上海快三基本走势图| www.602128.com-中彩票不捐钱走不了| www.706677.cc-网上买彩票算犯法吗| www.850942.com-一分时时彩怎么玩法| www.kw79.com-省份快三什么意思| www.6924.xyz-购彩网怎么注册账号| www.23969.com-彩神网火爆| www.12248.com-体彩短信投注| www.61331.com-709彩票官方| www.6637.top-分分彩任一万能五码| www.26833.com-竞彩足球跟单合买| www.74164.com-福彩双色球号码范围| www.951041.com-体彩福彩开奖信息| www.cp824.cc-快彩官网-| www.800213.com-快三黑客-| www.268080.com-彩民彩票电脑版| www.357385.com-合伙买彩票好吗| www.434466.com-浙江省体彩兑奖地址| www.784433.com-网络售彩最新消息| www.872041.com-买彩票多少钱一张| www.977711.com-彩色压印混泥土| www.cp6466.com-福彩中心主任泄密| www.032301.com-彩票推广方案| www.192672.com-拉萨体彩十一选五| www.310796.com-神圣彩票登录| www.440552.com-失信人可以买彩票吗| www.567621.com-体彩江苏七位数| www.641599.com-福彩图表-| www.760267.com-彩神uv打印机深圳| www.827794.com-网络彩票跟单员| www.857226.com-说买彩票的幽默话语| www.937028.com-臺湾福星彩库图| www.986965.com-彩票定位胆算法| www.ec58.com-分分快三正规吗| www.wg71.com-qq彩票下-| www.26fj.com-体彩80选20-| www.383824.com-彩条纹针织衫| www.544278.com-一分钟彩票开奖规律| www.625280.com-福彩广播-| www.684422.com-诚博购彩注册| www.751668.com-体育彩票打印纸| www.811049.com-福彩3d中大奖| www.8389.bid-福彩3d晚秋和值迷| www.48399.cc-免费491彩票资料| www.26044.com-佩奇彩票网址| www.477.bid-六和彩17期| www.056913.com-炫乐彩票网站| www.93268.cc-五百竞彩网-| www.581214.com-淘宝彩票在哪里进去| www.751128.com-高频彩8彩票| www.990917.com-北京快三出奖结果| www.56cp.cc-陕西彩票中奖查询| www.670504.com-彩色的造句大全集| www.019370.com-双色球中奖彩票图| www.120421.com-宝马彩票案焦点访谈| www.641908.com-福利彩票海报| www.gj77.com-江苏快三和值| www.44bf.com-博彩是干什么的| www.cp9611.com-旺彩官方下载苹果版| www.9342.net-香港球彩台sam| www.757838.com-彩票之家与你同行| www.196342.com-彩票306软件| www.329327.com-湖北福利彩票中心| www.20277.com-大发彩票平台坑人吗| www.117601.com-京彩app靠谱吗| www.333674.com-婚内买彩票中奖| www.806784.com-废彩票纸有什么用| www.975860.com-驻马店娶媳妇彩礼| www.cp5517.com-北京快三官方网站| www.343477.com-彩票对打方法| www.4643.vip-彩票店会赔钱吗| www.64558.com-竞彩算不算赌博| www.515239.com-彩票中奖后纠纷| www.97076.com-刮彩票有中大奖的吗| www.167923.com-福彩快3是赌博吗| www.305606.com-王百万买彩票牛牛| www.507194.com-浙江体彩机选| www.698950.com-初级彩铅画入门| www.5866.hk-体育彩票到期时间| www.70fd.com-七星南国彩票社区| www.975665.com-重庆时时彩骗局模式| www.15he.com-成都彩票店转让58| www.250558.com-中彩彩票平台多久了| www.285361.com-k彩福地测速| www.na46.com-58彩票网是黑彩吗| www.847908.com-古建筑彩绘锦心纹样| www.945299.com-福建省体彩领奖地址| www.22091.com-火山娱乐彩票app| www.8062.vip-陈流水彩示范| www.80137.com-博彩怎么玩-| www.085630.com-福建快三昨天走势图| www.745201.com-福彩今晚多久开奖| www.845954.com-海南私彩合法吗| www.904441.com-大发快三开-| www.963379.com-彩铅颜色搭配口诀表| 福利彩票www.78700l.com| www.118719.com-uu彩票是不是假的| www.35sk.com-七星彩4444-| www.40010.cc-彩票助手加奖最多| www.056996.com-七星彩抓码规律| www.119160.com-山东福彩中心电话| www.kt06.com-福彩三d中奖概率| www.xq84.com-彩票没有钱-| www.180.cm-每天在家做彩票| www.9601.vip-七星彩今夜开奖| 购彩网www.913gc.com| www.909848.com-三d彩界王子独胆| www.980135.com-竞彩让球比分直播| www.sa0.cc-爱乐彩江西11选5| www.41wv.com-幸运彩票能取现吗| www.42qt.com-家彩网杀码3d| www.kx22.cc-快三辅助免费下载| www.028913.com-购彩网入口-| www.354756.com-买彩票有什么秘诀| www.690233.com-足彩310走势图| www.050044.com-公益福彩pk拾| www.88501.com-永诚彩票注册| www.332623.com-彩票网上购买软件| www.370544.com-彩宝网彩票| www.23dd.com-天津体彩中心主任| www.256.name-2019彩票新政| www.579636.com-体彩5d试机号| www.976365.com-有快三的中彩彩票网| www.836496.com-报纸福彩天地| www.361377.com-九亿彩票是骗局吗| www.446589.com-2个彩票对刷| www.266591.com-福彩3d香港图| www.788243.com-许昌彩礼一般多少| www.845635.com-彩礼退还的三种情形| www.481848.com-快赢95彩票靠谱吗| www.279446.com-申利娱乐时时彩申请| www.441808.com-邯郸体彩中心在哪| www.903111.com-彩票合买平台合法吗| www.994638.com-彩票中的倍数怎么算| www.xz28.com-好的平台彩票|