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.220237.com-南方彩票网-| www.6853.top-体彩飞鱼有什么规律| www.764797.com-七星彩论坛加急版| www.870261.com-购双色球彩票| www.948367.com-公益福彩亲情助学| 博乐彩票www.35918f.com| www.la02.com-福彩28下载-| www.0xd.cc-彩宝提现-| www.55kw.com-779彩票靠谱么| www.0801.org-网上怎么买足彩竞彩| www.m16.com-彩票官网下载手机版| www.094878.com-pc手机壳彩印机| www.191356.com-如何看彩票走势图| www.287709.com-全发国际买彩票| www.370515.com-时时彩独胆必中方法| www.483852.com-彩票双色球号码顺序| www.285956.com-亚洲5分彩-| www.505229.com-福利彩栗中奖公告| www.583621.com-彩虹天团app官网| www.662693.com-今日哪个彩票开奖| www.735259.com-新手玩彩票玩那种好| www.814436.com-衡水福彩招聘| www.893857.com-彩61网址-| www.966153.com-福利彩票排列五手机| www.cp201.com-正规的彩票网站| www.ue90.com-新加坡乐和彩官方| www.7277.cc-彩虹六号高清图片| www.35926.com-三分彩全天计划下载| www.92806.com-红彩在线是正规的吗| www.922333.cc-香港招聘足彩分析师| 购彩在线www.66332y.com| www.nm59.com-14场胜负彩中奖| www.18rl.com-彩票复式中奖查询| www.98ga.com-连中彩-| www.4918.com-鸿运彩票登录网址| www.637090.com-手机版彩虹六号| www.739864.com-彩友吧预测总汇| www.820026.com-网上买彩票不兑奖| www.271197.com-新浪彩票开奖直播| www.566208.com-k8彩票黑钱-| www.656448.com-高频彩票游戏| www.773019.com-复式彩票奖金计算器| www.890006.com-nba篮彩推荐微博| www.858664.com-福利七乐彩开奖信息| www.933750.com-福彩高频彩app| 爱购彩票www.3552i.com| www.28at.com-福利彩票注册账号| www.538049.com-app国彩-| www.726713.com-苹果系统买彩票软件| www.799225.com-人人中彩票一等奖| www.737723.com-三d彩报布衣老汉图| www.850366.com-国外彩票怎么开奖| www.917900.com-彩虹歌词周杰伦| www.972756.com-彩客网触屏-| www.au0.com-快三追遗漏输钱| www.qp82.com-pc彩票真的吗| www.029584.com-澳客赢家彩票安卓| www.128452.com-买彩票倍投计算公式| www.33wc.com-一分钟快三稳赚技巧| www.0455.cm-爱购彩票网站| www.120827.com-体彩顺口溜-| www.936236.com-买彩票能赚钱吗| www.hb78.com-福彩3d字谜新彩吧| www.0118.cm-福彩怪事-| www.43767.com-中彩彩票科技| www.69mt.com-金沙送彩金得网站| www.351301.com-彩神v交流群| www.133771.com-c彩61软件-| www.57gb.com-3d新彩网巴-| www.2995.shop-牛彩藏机图3d| www.02455.cc-中国新彩吧首页| www.800390.com-新3d福彩吧-| www.154979.com-体彩足球6串22| www.537596.com-不属于无彩色系| www.637204.com-彩虹民用无人机| www.759600.com-体育彩票f1-| www.832888.cc-福彩太湖钓叟字谜| www.898891.com-王牌彩票网官方端口| www.959743.com-盈彩官网江苏快三| QQ彩票www.89894q.com| www.js19.com-彩神l下载-| www.zs49.com-彩票各类玩法| www.16pz.cc-今天体彩奖号是多少| www.616453.com-竞彩3场2关怎么算| www.705180.com-足球彩票中奖经历| www.772485.com-福利彩票国家挣钱吗| www.848395.com-c38彩票领导者| www.911166.com-彩票排列五开奖结果| www.972400.com-福彩3d魔图定位| 55彩票www.755874.com| www.od23.com-福彩网是正规平台吗| www.11mh.com-654彩票-| www.84vk.com-福彩行业工作| www.1664.org-彩票行业五行属于| www.7716.cm-分分彩人工计划网页| www.855112.com-爱彩是真的能赚钱吗| www.943152.com-福利彩票领奖地址| 虹彩集团www.hcjt6.com| www.047139.com-app彩票平台下载| www.28578.cc-彩票店没客人| www.dp40.com-手机上买快三违法吗| www.862139.com-体育彩票中了奖号码| www.953760.com-盛大彩票官方网站| 大赢家彩票www.5086a.com| www.61366.com-乐仑彩票官网| www.189470.com-密聊彩票-| www.862353.com-全民彩票可靠吗| www.966266.com-广西快三预测群| www.lh55.com-中彩彩票zc01| www.079025.com-彩票一定牛怎么样| www.254530.com-快三和值跨度速查表| www.334272.com-香港快三玩法| www.431274.com-选6型彩票缩水软件| www.519047.com-彩票站知道谁中奖吗| www.873752.com-彩票视频开奖软件| www.973078.com-彩虹六号季票没了| www.di10.com-520快三网址| www.986425.com-上海彩票基诺走势| www.sp7.cc-快三开奖直播| www.113312.com-彩票中奖绝招| www.203348.com-快乐彩十分钟| www.285881.com-公益彩票app| www.537632.com-用色彩和彩色造句| www.730699.com-老梁说彩票的背后| www.662176.com-下载七星彩开奖结果| www.754172.com-彩天下免费资料大全| www.830366.com-哪个软件能查彩票| www.908318.com-e77彩票线路检测| www.981261.com-彩票缩水软件大全| www.cp3772.com-北京快三一天多少期| www.nq03.com-福彩双色球自选号| www.32yx.com-开体育彩票店需要| www.661205.com-梁老师彩票揭秘| www.390314.com-新疆11选5彩票| www.101718.com-彩狮app计划软件| www.214011.com-彩神争vlll-| www.541604.com-网易彩票排列推荐号| www.699848.com-火星5分彩计划| www.797967.com-彩票源码免费下载网| www.872435.com-福彩3d神六鬼算| www.994813.com-快三中几位算中奖| www.d53.net-彩票预测神器苹果版| www.912707.com-彩客站微信群| www.zx49.com-下载重庆市彩开奖| www.398159.com-大奖彩票网上购买| www.351508.com-买彩票输了全部的钱| www.554156.com-彩票重码是什么| www.690661.com-19045足彩-| www.835315.com-日本版好彩-| 500彩票www.50051o.com| www.973947.com-七天彩苹果-| www.gy83.com-1980彩票-| www.19yo.com-香江彩app-| www.975.cm-七星彩可以组选吗| www.47.biz-2016六开彩-| www.206407.com-彩票购彩大厅登录| www.288460.com-彩票屠龙记-| www.365776.cc-广东七乐彩开奖结果| www.458592.com-十一选五北京爱乐彩| www.cf07.com-大发快三是什么平台| www.744666.com-228彩票app-| www.510310.com-泉州彩票店转让| www.848698.com-全天台湾时时彩计划| www.893039.com-竞彩过滤软件手机版|