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.253708.com-竞彩平台-| www.671030.com-澳洲时时采彩赢钱了| www.806192.com-中彩网3d走势表| www.932065.com-特区七星彩票讫坛| www.tv.com-中彩网3d-| www.4388.vip-3d彩博士-| www.022841.com-河南派彩-| www.684519.com-福彩三地和值规律| www.865517.com-御彩轩人工计划软件| www.997487.com-快三之家是不是真的| www.zz27.cc-太原体彩店如何申请| www.60404.com-彩票研究办法| www.047733.com-五行与数字推算彩票| www.148577.com-黑龙江福彩p62| www.53cm.com-大富彩票网app| www.924178.com-掌优彩票靠谱不| www.766786.com-彩虹糖的颜色和口味| www.201118.com-5分彩开奖结果| www.110946.com-彩票开奖什么软件好| www.737662.com-福彩2o选走势图| www.zi58.com-往期彩票中奖号码| www.83ko.com-3位数的彩票是| www.664880.com-彩民之家提供香港| www.uv34.com-老谢说彩004| www.16vp.com-兼职竞彩分析师| www.93ye.com-福利彩票选号区域| www.119322.com-鸿彩票软件下载| www.306420.com-双色球彩票贴吧论坛| www.3510.com-66微彩-wap站| 易彩网www.12455q.com| www.386328.com-中奖彩票怎么兑换| www.9547.loan-海南彩票比赛| www.25124.com-安徽体彩家园网| www.551015.com-时分彩票下载| www.846991.com-彩票平台购买3d| www.977886.com-世界杯体彩在哪买| www.1434.cm-zg彩票网app| www.075827.com-凤凰彩票网有几个| www.498490.com-乛彩民乐十阳光探码| www.792176.com-浙江省福彩中心主任| www.983468.com-易发彩是真实的吗| www.661.gg-北京时时彩五分彩| www.707906.com-湖北快三预测彩乐乐| www.795933.com-彩坛至尊下载| www.895261.com-京东快彩谁赚钱了| www.968999.com-刷彩金是干嘛的| 凤凰彩票www.712012.com| www.645431.com-酷彩网时时彩平台| www.jg12.com-广西快三遗漏值查询| www.369450.com-福建体彩泉州乐聊天| www.172391.com-江西快三和值走势图| www.3792.biz-365足彩胜负彩| www.547518.com-安徽省快三50| www.91400.cc-好彩蓝莓双爆缅甸版| www.003805.com-跑马彩票3分钟趋势| www.lf9.com-1分快3彩票网| www.17.bid-11选5大彩鲸网站| www.18bm.com-合买彩票抄单意思| www.983628.com-买足球竞彩网| www.5614.biz-代买彩票骗局| www.629376.com-香港彩宝典ios| www.308130.com-微信钱包里没有彩票| www.503918.com-万豪彩票官方| www.591422.com-竞彩马会澳门对比| www.671434.com-彩500正规吗| www.770584.com-重庆时时彩放假么| www.857491.com-玩彩票用什么app| www.319249.com-江西快三哪里买| www.583781.com-彩色的中国简谱| www.43430.cc-彩票3d开奖查询| www.138432.com-鸿彩开了多少年了| www.4681.vip-3d家彩网独胆| www.136575.com-6768彩票手机版| www.x80.biz-彩票互联网重启| www.576.tv-51彩虹登录入口| www.266802.com-3d福彩规则-| www.872719.com-福彩端是什么app| www.qi59.com-好彩1生肖中奖规则| www.218170.com-吉林严查黑彩| www.39099.com-休彩票开奖-| www.87329.com-手机彩色贴纸| www.80zl.com-一三五台湾福星彩| www.8825.site-彩票引流方案| www.737965.com-凤凰彩票怎么赚流水| www.981451.com-彩票返点数啥意思| www.888.net-体彩p3有试机号吗| www.048822.com-今天2鱼玩彩独胆| www.212591.com-时时彩娱乐注册平台| www.454641.com-皇冠国际博彩可靠么| www.641511.com-香港彩合宝典| www.751426.com-福彩3d守号方法| www.871225.cc-773彩票app-| www.979487.com-彩金列传完美通关| www.ot53.com-彩票新规收入下降| www.33617.com-乐城彩票怎么样| www.63906.com-足彩单关赚钱技巧| www.qf09.com-体育彩票app扫码| www.638575.com-竞彩足球店沈阳| www.798613.com-彩虹8app彩票| www.641197.com-体彩头像-| www.633956.com-七彩建设金海亭| www.807256.com-玛雅吧彩票下载| www.978331.com-彩钢警示条-| www.84sf.com-彩民数据库-| www.67oq.com-体彩转让泰安| www.8340.com-三分时时彩票| www.812349.com-开头带彩字四字成语| www.409.cm-中国彩市第一巨奖| www.6050.in-体彩过户-| www.21278.com-网络彩票情感诈骗| www.86638.cc-衡阳福利彩票在哪里| www.162011.com-快三开奖计算公式| www.495930.com-体彩开奖19017| www.894843.com-信彩快三计划| www.b07.cn-一分彩网站-| www.564671.com-佛山彩票没人领| www.92761.com-山东福彩微信公众号| www.175230.com-老快三跨度走势图| www.7148.cm-七彩假期-| www.309218.com-美女带你买彩票骗局| www.730695.com-靠谱的足彩app| www.829387.com-玩彩的聊天工具| www.46vx.com-彩票平台网址导航| www.787263.com-福利彩票店转让双彩| www.863152.com-分分彩任二挂机玩法| www.918560.com-博彩论-| www.970423.com-体育彩票20选5| www.um7.com-马来三分彩开奖直播| www.na46.com-58彩票网是黑彩吗| www.y03.top-奥客彩票开奖| www.778081.com-体彩大乐透何时开奖| www.859688.com-厦门福彩快三走势图| www.935012.com-彩8彩票靠谱吗| www.983367.com-福利彩票选四走势图| www.cp218.com-4s彩票藏宝阁| www.296375.com-福彩快三计划群| www.132826.com-怎么在网上买足彩| www.z22.top-云购彩票最新邀请码| www.077163.com-今日青海快三开奖| www.117659.com-2019竞彩普及日| www.048699.com-彩覇王-| www.86293.com-博彩彩票app下载| www.6161.biz-世界彩票协会总部| www.64222.com-竞彩足球旧版本| www.019650.com-双色球彩迷图下载| www.877221.com-113彩票app-| www.127392.com-竞彩让球胜平负网| www.689228.com-专业玩彩网-| www.034952.com-快三猜大小-| www.678533.com-吉林快三下一期预测| www.qh9.com-网上买彩票怎么兑奖| www.973420.com-91彩虹哥-| www.qq75.com-彩票种类-| www.72ma.com-重庆约彩彩票| www.345315.com-彩神通的使用方法| www.404335.com-彩经网试机号体彩| www.120404.com-宝马彩票案刘亮现状| www.488711.com-7乐彩几点开奖| www.57725.cc-百度中彩彩票| www.377557.com-离婚彩礼和嫁妆问题| www.70vc.com-3d今彩易网-| www.751843.com-彩票辅助系统| www.863569.com-体育彩票超级大乐透| www.921480.com-彩神2软件可靠吗|