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.953497.com-中国福利彩票网贴吧| www.321898.cc-南南国七星彩票论坛| www.4645.top-彩票是运气还是技术| www.560196.com-广东体育彩票app| www.4689.cm-福彩追号最多几期| www.051333.com-360福彩3d-| www.284.in-七星彩三字定概率码| www.r37.cn-万达彩票平台可信吗| www.938121.com-快三开奖有没有猫腻| www.267632.com-易中彩票-| www.594973.com-好彩赢三张下载| www.800098.cc-黑客中福快三| www.924163.com-香港四亿彩票网站| www.993488.com-彩票上的签名区| www.nk28.com-网上竞彩app| www.151874.com-爱彩网app下载| www.276551.com-苏州体育彩票网| www.993358.com-足彩竞猜胜负规则| www.hk40.com-易彩票怎么赚钱| www.e23.me-河北福彩快3开奖| www.381061.com-杨光华彩票现状| www.520932.com-福彩都有什么| www.852651.com-北京福彩28-| www.999565.com-大发快三怎么买数字| www.kb43.com-镇江体彩-| www.24ox.com-好彩国际网投| www.562503.com-秒速赛车彩票技巧| www.685456.com-下载彩票中奖软件| www.800432.com-幸运彩02-| www.932506.com-查上海快三开奖公告| 500彩票www.175901.com| www.rk06.com-釉彩大瓶的化学成分| www.30gm.com-中国竞彩网赛果| www.826473.com-马云与彩票投资| www.510373.com-彩虹的约定律动| www.602556.com-龙腾彩票-| www.027144.com-5分彩是真的吗| www.478708.com-永利彩投合法吗| www.378890.com-uk彩娱乐骗局| www.83qf.com-长春彩溢几点大选| www.178535.com-福彩网app下载| www.748666.com-一分赛车彩票天天输| www.877027.com-七乐彩几点截止| www.968154.com-彩票骗了多少人| www.gn11.com-郑州市区彩礼| www.265179.com-彩票3d领袖贴吧| www.992259.com-包头市福彩中心| www.fi60.com-老梁说彩票是假的| www.yq08.com-信彩票官网-| www.35os.com-808七星彩早版区| www.0900.mobi-全民中彩票客户端| www.7918.cc-香港行政快三app| www.a03.cc-上海快三今日推荐| www.59ta.com-体彩竞猜限制| www.14hu.com-体彩任三中奖规则| www.441.bid-港彩必中10码| www.840044.com-极速77彩票平台| www.56396.cc-金彩网高手天下网| 中国福利彩票www.08588z.com| www.wp13.com-马采西亚乐和彩开奖| www.603756.com-977幸运彩票| www.456837.com-重庆时时彩无牛概率| www.678370.com-福彩杀码定胆家彩网| www.836966.com-天下移彩票-| www.964524.com-中国体彩在线购买| www.as54.com-广西快三跨度走势图| www.707912.com-玩时时彩心态很重要| www.883796.com-网恋被骗博彩| www.0532.xyz-快三骰子的规律| www.63378.com-19050足彩预测| www.169905.com-今日快三吉林| www.676968.com-今日福彩3d小鱼图| www.846679.com-崔永元彩票| www.924954.com-全民赢彩票无法提现| www.cj97.com-安徽福彩网查询| www.85rm.com-竞猜足彩23期推荐| www.953374.com-广东好彩三开奖结果| www.12870.com-运盛彩票套路| www.082626.com-118网站彩票| www.216365.com-彩票的税率-| www.344525.com-彩61网站大发快3| www.536093.com-那种彩票奖金高| www.ua52.com-双色球彩票用语| www.782770.com-河北省彩票中心地址| www.853630.com-天津电脑福利彩票网| www.917797.com-彩虹代刷网装修代码| www.976159.com-河南省的彩礼多少钱| www.ef.com-中国竞彩足球计算器| www.859203.com-体彩排三开奖号查询| www.983904.com-3d福彩下载安装| www.el24.com-快三大彩鲸助手| www.18zf.com-公然摆卖私彩| www.6991.cm-彩票的购买规则教学| www.053200.com-苏州彩票店转让信息| www.681543.com-下载豪彩娱乐账号| www.773024.com-晶彩靓研美白祛斑霜| www.852038.com-说彩传媒-| www.764234.com-彩克下载-| www.2974.cn-金祥彩票v1-| www.1257.pw-顶尖彩票app兼职| www.200013.com-腾讯时时彩官方开奖| www.946793.com-彩钢瓦围挡成本| www.10327.com-下载爱乐彩票| www.345421.com-福彩6十1中奖表格| www.507256.com-彩神争霸网页登录| www.76007.com-温州福彩-| www.331177.com-彩票趋势图准吗| www.774598.com-实亿彩票app| www.46827.com-体彩一共几位数字| www.402558.com-网投彩票大全| www.618850.com-新浪电脑版首页彩票| www.42288.com-qq彩色名称-| www.613869.com-体彩大乐透严重作弊| www.768615.com-好彩网是不是真的| www.502131.com-中国宏达彩-| www.569110.com-福彩3d封机时间| www.636231.com-中国福彩无纸化| www.733736.com-彩票属于国有企业吗| www.796849.com-胜负彩开奖任九开奖| www.635.cm-福彩东湖社区网址| www.908.gg-老版彩库宝典苹果版| www.940611.com-财神争霸500彩票| www.991272.com-福彩121网-| www.bx40.com-广西彩票客户端| www.sh16.com-彩乐网报码-| www.9oh.com-彩票推测-| www.313361.com-彩神app合法吗| www.387238.com-重庆时时彩彩预测| www.02176.com-江苏快三平台推荐| www.390918.com-龙珠全彩本子| www.590398.com-福彩和值尾2元网| www.707219.com-易彩账号登陆| www.862366.cc-手机新浪网彩票| www.985893.com-快三三不同号多少注| www.216.org-玩彩网app充值| www.549563.com-在线怎么买足彩| www.443725.com-掌上彩五肖十码网站| www.530825.com-彩铅零基础画| www.596103.com-甘肃快三33期| www.659376.com-皇彩网-| www.527663.com-时时彩容错做号法| www.645495.com-陶瓷新彩课程小结| www.696153.com-四亿彩票登录网址| www.777432.com-澳客赢家彩票客户端| www.862888.com-甘肃福彩快3直播| www.947681.com-支付宝兑换彩票中奖| 818合彩www.www.9889hc.com| www.lr05.com-旺彩app软件下载| www.r53.cc-可以提现的彩票网| www.588196.com-福彩三d走式图| www.728628.com-京东时时彩-| www.uv3.cc-买竞彩输的家破人亡| www.1815.cc-彩3登陆-| www.325867.com-查一下体彩试机号| www.679134.com-遗言彩票-| www.791346.com-大乐透开奖彩宝网| www.35697.cc-竞彩销售管理系统| www.87716.cc-太阳彩票靠谱吗| www.91488.com-炫彩手机壁纸大全| www.234434.com-手机买彩票中一等奖| www.088404.com-黑龙江体彩开奖结果| www.98328.cc-信彩娱乐网址| www.046099.com-彩81彩票网址| www.156137.com-3d牛网彩涂迷今天|