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天

知道了
亚洲28 www.166760.com-网上快三代理| www.009858.com-下彩彩票手机网页| www.209499.com-体彩排列五综合版| www.135951.com-体彩篮球竞猜平台| www.893363.com-七乐彩过滤缩水软件| www.aw87.com-中国福彩5d-| www.93fg.com-吉林快三和值号码图| www.728565.com-彩票游戏网站| www.041346.com-澳洲有哪些彩票| www.740016.com-网购福利彩票| www.602786.com-彩虹6号禁播| www.144353.com-足彩半全场胜负规则| www.895622.com-大中华彩票网官网| www.72738.com-北京福彩兑奖大厅| www.717389.com-橙子彩铅手绘| www.844590.com-彩票大奖组-| www.922557.com-招聘竞彩顾问| CP701www.cp702.vip| www.022707.com-1516彩票app| www.67930.com-极速1分彩-| www.121283.com-12彩票app下载| www.97267.cc-竞彩实时投注量查询| www.750063.com-旺彩彩票查询| www.870065.com-彩票20选8-| www.975287.com-彩汇网-| www.in3.com-内蒙快三规律| www.890017.com-国内合法彩票平台| www.971173.com-福彩双色球中奖概率| www.cp6615.com-快三牛逼计划群| www.003466.com-菲律宾彩票网| www.222472.com-四大网络彩票平台| www.404177.com-用油性彩铅画星空| www.ar23.com-四川省体育彩票| www.501695.com-体彩刮刮乐大奖| www.89709.com-胜负彩19033| www.073343.com-大家赢彩票安全吗| www.81zp.com-竞彩双平怎么选| www.486349.com-西安福利彩票| www.588599.com-七乐彩19024| www.622468.com-傲赢彩票安卓版下载| www.92980.com-皇博彩票这个软件| www.121635.com-时时彩开奖历史数据| www.008127.com-星期五是什么彩票| www.308093.com-贵州体彩网点查询| www.458611.com-足球彩票有几种买法| www.822644.com-彩票最多中多少| www.953069.com-买彩票怎么买的| www.ml98.com-安徽快三分布走势| www.51673.cc-安装牛蛙彩票| www.028745.com-678彩票网app| www.21hz.com-六火彩票18跑狗| www.86076.com-福彩3d双彩图谜| www.7891.cn-云彩排云送彩票来| www.277875.com-双色球分析中彩网| www.379234.com-潢川广场福利彩票| www.464256.com-类似好彩爆-| www.544300.com-黑彩代理怎么返点| www.605393.com-众彩网论坛是真的吗| www.363397.com-彩虹的七个颜色英文| www.w01.org-0567好彩群-| www.102755.com-马来三分彩网址| www.131650.com-湖北彩礼钱明细表| www.2912.org-彩专家手机版| www.965903.com-买彩票幽默的句子| www.322788.com-体彩七星彩几点停售| www.515174.com-七星彩结果今天的| www.227902.com-查福彩开奖结果| www.684341.com-福彩3d所有和值| www.921342.com-彩神争霸团队| www.fm02.com-腾讯分分彩玩法心得| www.825663.com-南宁福骰快三正规吗| www.926601.com-优信彩票下载安装| www.987559.com-体彩25选五走势图| www.cb77.com-彩51彩票下载| www.et18.com-快三算号器-| www.051027.com-彩票平台制作怎样做| www.656401.com-易彩注册测速| www.221851.com-今天七星彩开的结果| www.438204.com-彩票宣传广告词语| www.635756.cc-七彩印象香烟价格| www.853745.com-专业玩彩人-| 大赢家彩票平台www.937182.com| www.179812.com-彩票系统破解| www.759576.com-时时彩在线计划二期| www.821809.com-爱博彩票网86| www.882485.com-一分彩票-| www.955119.com-开彩彩票-| 购彩之家www.zhang258.com| www.cv75.com-鸿彩快三彩票网| www.tj60.com-福福利彩票快3江苏| www.4dx.com-中华彩票邀请码| www.009282.com-瑞彩祥云彩票邀请码| www.43am.com-网易体彩网-| www.0118.cc-彩票预算专家| www.8035.vip-微信十字彩怎么玩法| www.43300.com-四川福彩学院| www.590553.com-体彩足球竞猜赔率| www.td89.com-时时彩倍投计算器| www.4975.top-福彩微信交流群号码| www.zw13.com-广西福彩选号3助手| www.045608.com-81彩-| www.7032.cn-众乐彩网-| www.34002.com-七星彩的开奖规则| www.830538.com-彩票手机软件排行榜| www.919882.com-做一个彩票软件| www.981230.com-彩虹冰淇淋-| www.as42.com-彩票平台刷流水赚钱| www.e72.net-cba彩票投注| www.418901.com-彩金项链款式| www.565360.com-乐彩论坛3d杀码| www.710671.com-彩票党是什么意思| www.19no.com-肥城体育彩票| www.96oh.com-手机万达彩票平台| www.44878.com-快三彩乐乐-| www.3737.me-七星彩开什么奖啊| www.073144.com-丹麦快乐彩在线计划| www.739042.com-正规彩票推广老板群| www.808779.com-五三快三计划软件| www.877652.com-彩票五行属水| www.38cw.com-菏泽彩礼排行榜| www.95ks.com-七星彩口诀之王| www.1763.pw-快三单双怎么玩稳定| www.293731.com-1分快三计划表| www.18667.cc-快三对子对照表| www.288366.cc-甘肃快三助手| www.77yq.com-体彩网中奖号| www.278389.com-分分中彩票网页| www.7107.loan-七彩花坊怎么样| www.84573.com-彩钢板上怎么开大孔| www.693034.com-手机自助购彩| www.801154.com-彩71网站-| www.903147.com-爱购彩大发快3| www.987114.com-购彩堂官网-| www.bk73.com-福彩快3分析软件| www.791700.com-七乐彩中奖数据查询| www.863268.com-胜负彩19007期| www.110099.com-下载彩乐透-| www.93io.com-什么是腾讯5分彩| www.3734.biz-今晚上七星彩开什么| www.mr49.com-快三哪里可以买到| www.693067.com-17彩票是不是真的| www.799886.com-辽宁福彩双色球现场| www.884700.com-鳄鱼彩票app| www.948830.com-旺彩大乐透下载| www.998328.com-天津快三前三组走势| www.ce48.com-玩快三怎么玩能挣钱| www.3795.net-全民足球彩票| www.595778.com-鑫彩网大发快3登录| www.698222.com-中国彩app怎么样| www.19609.com-体彩36怯7-| www.eq02.com-河北快三开奖结| www.056399.com-够力七星彩奖表安装| www.72349.com-大钱庄彩票软件下载| www.213512.com-福建快三兑奖方式| www.038873.com-信彩团队计划| www.59er.com-竞彩足球推荐微信群| www.90096.cc-788彩票app-| www.832958.com-时时彩专业版计划| www.767533.com-都彩神怎么玩| www.aj77.com-杳看开七星彩| www.1kt.cc-彩神计划王-| www.647293.com-好运彩彩票下载安装| www.412560.com-足彩九场新浪爱彩| www.605808.com-福建体彩开奖管方网|