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天

知道了
百盈PK10 www.775688.com-邯郸体彩中心电话| www.279001.com-穷人买彩票越买越穷| www.3er.com-开台湾福星彩现场| www.1388.online简单水彩-| www.98356.cc-竞彩足彩预测分析| www.590662.com-福彩幸运二中奖规则| www.913788.com-万彩网彩票-| www.vq06.com-云南福利彩票玩法| www.58587.cc-彩票彩报-| www.088633.com-天天彩是真的假的| www.905922.com-彩色资料图片| 彩票坊www.022sc.cc| www.pe95.com-一分钟快三开奖官网| www.537931.com-彩色宝石价格| www.611332.com-彩票信息网-| www.677111.cc-掌上福彩宝典app| www.sj06.com-竞彩网360彩票网| www.313918.com-数字彩票开奖结果| www.618184.com-体彩做的是什么公益| www.699123.com-湖北快三走推荐号| www.883305.com-投彩是什么-| www.961240.com-什么人会中彩票| www.id46.com-80彩票是骗局| www.dz14.com-广西快乐彩开奖结果| www.l18.in-网上彩-| www.41qg.com-体彩怎么买七星彩| www.5219.wang-注册送300元彩金| www.42579.com-不限id送彩金| www.90455.com-体彩二维码有效期| www.080567.com-怎么破解彩票平台| www.1541.xyz-体育彩票兑奖地址| www.753236.com-633彩票-| www.34245.com-水溶彩铅画人物| www.051601.com-3d福彩试机号金码| www.163311.com-中国福彩排五| www.280587.com-竞彩足球比分真播| www.420261.com-中国竞彩网实时比分| www.890759.com-彩02-| www.4322.cn-鑫彩网怎么注册| www.36647.com-博彩股有哪些| www.005581.com-彩1app在哪下载| www.146033.com-3的新彩吧-| www.167.biz-彩票助赢网-| www.9463.xyz-中国人在外国买彩票| www.70287.com-体肓彩票大乐透走| www.958491.com-七星彩中奖的故事| www.108522.com-七星彩开出什么奖| www.055105.com-足球彩票哪家好比较| www.685007.com-3d彩字谜图谜| www.664500.com-荷花儿彩铅素描图片| www.873830.com-竞彩足球彩票玩法| www.ph0.com-亚博足彩app| www.ty49.com-时时彩彩票高手论坛| www.803238.com-捷豹彩票娱乐主管| www.893815.com-辉煌彩票-| www.k49.top-诺亚彩票平台靠谱吗| www.37903.com-腾讯彩软件-| www.47430.com-玩快三输死了怎么办| www.669311.com-360彩票最大遗漏| www.773311.com-足彩滚球大小球公式| www.ta44.com-江西省福利彩票| www.36ag.com-体彩排列三跨度振幅| www.921927.com-安阳彩礼一般多少钱| www.wy34.com-湖北快三牛彩| www.44pg.com-uc彩票22-| www.16sc.com-体彩排5奖结果查询| www.3199.top-福彩哪个app靠谱| www.01492.com-彩票注册即送彩金| www.55892.com-幸福快3彩票| www.75062.com-中囝体育彩票大乐透| www.183008.com-中国福彩官方网站| www.393475.com-彩客网双色球推荐号| www.552400.com-山西福利彩票爱彩乐| www.695985.com-福彩体彩走势大全| www.yx99.cc-红旗彩票导航| www.v13.in-好彩网预测-| www.76kd.com-中国彩八三b| www.360393.com-3d彩报图今日| www.958140.com-福彩3d有几种买法| 福利彩票www.99677i.com| www.095801.com-广东福彩票发行中心| www.768211.com-福彩内蒙古快三| www.351055.com-体彩卖什么-| www.52415.com-6彩库图-| www.066236.com-彩票935-| www.352193.com-台湾基诺彩-| www.59599.cc-88彩票走势图| www.151898.com-体彩排列三今日推荐| www.052515.com-u9彩票下载安装| www.164254.com-福彩怎么容错| www.262335.com-福彩天天大报| www.447012.com-足彩qq群俱乐部| www.025105.com-vb彩票选号-| www.88lh.com-竞彩足球欧赔心德| www.7687.cc-幸福彩票是合法的吗| www.67930.com-极速1分彩-| www.018994.com-苏州体彩网官网| www.gt77.com-福彩店怎么申请| www.676804.com-福彩开奖是假的| www.761998.com-福彩3d开机号| www.834590.com-好彩爆珠烟价格| www.904636.com-江苏快三遗漏数据| www.968637.com-乐彩vip合法吗| www.cp8117.com-易彩快3计算| www.th79.com-福彩体彩开奖号码| www.83278.com-竞彩怎么抓平局| www.072458.com-cp55彩票-| www.zb9.com-皇都彩票-| www.361956.com-彩吧论坛官方下载| www.460016.com-蒂之彩是个骗局| www.577085.com-好彩i门户软件下载| www.713701.com-福彩3d专业玩胆| www.833896.com-湖北福彩软件哪个好| www.935670.com-预测彩票软件| 亚投彩票www.299078.com| www.ts18.com-体彩开奖查询历史| www.238392.com-2020彩票-| www.456343.com-彩票自动核对地址| www.581607.com-搏123彩票网站| www.304234.com-澳洲彩票计划软件| www.kj10.com-彩票查询中奖| www.w56.cc-彩票app赢钱彩| www.263457.com-七乐彩复式-| www.056205.com-彩票诈骗报警| www.131506.com-中彩彩票是什么意思| www.796857.com-胜负彩18109| www.576216.com-福彩书-| www.697888.com-彩票连中app| www.783816.com-最新彩票093| www.883491.com-彩神软件骗局破解| www.970851.com-vr分分彩漏洞| www.ms15.com-锋彩直播手机版苹果| www.28323.cc-福彩双色球中大大奖| www.99313.cc-重庆时时彩赔付规则| www.129335.com-快三翻倍投注计划| www.9188.top-星期六开奖彩票彩种| www.140678.com-广西彩票兑奖中心| www.9440.cn-华人彩平台登录| www.890897.com-快三单式查询| www.446520.com-网购彩票正规app| www.6447.xyz-天天体彩下载官网| www.22511.com-13e彩票app-| www.329331.com-福彩30选五走势图| 500万彩票www.808712.com| www.858335.com-福彩开将结果| www.969472.com-欢乐彩票官网| www.ca7.com-福彩快3软件下载| www.51582.cc-超级快三是不是真的| www.280607.com-时时彩最新人工计划| www.256167.com-全球彩票安卓版| www.663893.com-众彩乐彩票软件下载| www.823359.com-彩铝板的价格| www.984466.com-彩运网cy088| www.lo44.com-彩票2元专业版| www.92yw.cc-淘宝购物送彩是什么| www.9473.org-彩票统计分析| www.493698.com-网上私彩怎么赚钱的| www.583543.com-彩票排列5计算算法| www.13571.cc-310竞彩体育| www.87283.com-uu彩票app-| www.40945.com-彩拾app怎么下载| www.145622.com-彩神500官方| www.480486.com-莆田市福利彩票中心| www.022828.com-淘彩票漏洞-|