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.mq88.com-网络福彩3d骗局| www.3686.com-川沙彩色复印机租赁| www.778048.com-体彩七位数游戏规则| www.mu21.com-快三怎么看规律| www.676.in-跟时时彩计划反买| www.227620.com-福彩网上投注站| www.505270.com-今日体彩排3开奖号| www.992480.com-彩客化学-| www.10sl.com-彩票的积极作用| www.8165.wang-新快三彩票赚钱吗| www.85750.com-山东体彩论坛l| www.188148.com-北京快三开奖详情| www.343444.com-有没有买彩票养家的| www.969476.com-欢乐彩正规吗| www.38232.com-全球彩安卓| www.361544.com-红牛福彩下载安装| www.478848.com-深圳体育彩票招标| www.bh71.com-易彩票-| www.q21.net-快三助手安全吗| www.4595.vip-只买一个号的彩票| www.127260.com-gv彩虹世界论坛| www.223826.com-e球彩进球数规律| www.066881.com-香港博彩及彩票税| www.632776.com-七彩网络查分数| www.737719.com-中乐彩手机平台| www.63432.com-365彩票官方版| www.377331.com-因彩礼钱分手值得吗| www.470910.com-彩票暴富小说| www.562098.com-全民彩票苹果版| www.664269.com-福彩太湖谜语总汇| www.756115.com-御彩轩害死了多少人| www.821910.com-彩票沙龙好玩| www.886246.com-彩票计算分析原理| www.951417.com-腾讯天天中彩网| www.999787.com-金海特彩票网免费| www.bz86.com-福彩快三怎么举报| www.516328.com-中福网彩票注册| www.53nz.com-体彩二等奖去哪领奖| www.14od.com-宁国彩票-| www.228289.com-新疆喜乐彩开奖号码| www.568081.com-卖体彩好还是福彩好| www.668410.com-国际彩票下载| www.750080.com-彩票3d预测代码法| www.832082.com-977彩票官方正版| www.905938.com-福建省福彩兑奖中心| www.967352.com-福彩预测专家号码| www.cai3373.com快三定胆准确率99| www.ys70.com-延吉福彩中心| www.28dy.cc-艾彩登录口-| www.97822.com-山西太原结婚彩礼钱| www.036.cc-彩票代打盈利靠谱吗| www.lq00.com-彩宝贝app下载| www.926566.com-一注彩票多少钱| www.739214.com-彩票软件免费下载| www.830329.com-9万彩票害了多少人| www.916786.com-fd抓包改博彩| www.ft19.com-公益福彩快三合法吗| www.6zk.cc-酷彩吧真的吗| www.517762.com-体彩排列3预测论坛| www.076883.com-山东体彩订票系统| www.157575.com-足彩猜比分技巧| www.72pj.com-彩票2019新规则| www.596659.com-高频彩票极速飞车| www.679252.com-彩虹六号4倍| www.767408.com-青蛙彩票导航网网站| www.871974.com-牛彩票网首页| www.932161.com-彩票倍投盈亏计算器| www.986158.com-彩票送彩金app| www.at16.com-广东福彩有快3吗| www.sz74.com-6位数的彩票| www.57qk.com-足彩比赛-| www.9883.cn-体彩七位开奖结果| www.335355.com-世界杯彩票网上买| www.805881.com-福彩猪年刮刮卡| www.zf77.cc-速八彩票骗局| www.947592.com-购彩彩票论坛| www.93no.com-亚盘足彩app| www.4380.vip-01彩票东坡下载| www.17877.cc-看彩票的软件有哪些| www.99346.com-内蒙古体彩十一选5| www.108395.com-500彩下载地址| www.288923.com-五分快三官方| www.403046.com-体彩十倍幸运| www.jo3.com-福彩3d组六胆拖| www.7159.com-老挝博彩行业合法吗| www.47062.com-时时彩一期计划全天| www.94477.com-广西体彩乡镇销售额| www.051806.com-中国体育彩票顶呱刮| www.30009.com-奥客彩票-| www.4379.biz-吉林快三图跨度| www.313113.com-多盈彩票网站| www.444168.com-中福快3是什么彩票| www.603502.com-山西省体彩兑奖中心| www.694062.com-彩票几天-| www.26772.com-七星彩是多少钱| www.947767.com-台湾彩票历史开奖| www.78557.com-快乐双彩复式玩法| www.505274.com-福彩3d现场直播| www.603707.com-梦见去彩票店打彩票| www.677876.com-湖北福利彩票公众号| www.419423.com-黄金叶七彩爆珠| www.32ty.com-中国体彩福利| www.929026.com-bb彩票有假吗| www.989254.com-杭州福彩店怎么申请| www.w64.com-3d200期双彩图| www.704482.com-128彩票平台下载| www.798763.com-盛世彩票ss-| www.875415.com-网络彩票继续就是输| www.941829.com-在彩票店打工怎么样| www.982990.com-牡丹海棠与彩玉海棠| www.cp16.com-十一多乐彩-| www.557069.com-体育彩票大乐透复式| www.74pb.com-天天好彩744cc| www.80411.com-福利彩票双色球开二| www.240233.com-神彩争霸下载地址| www.164118.com-nba篮彩竞猜| www.255646.com-赢彩票登录| www.981064.com-七彩杯官网-| www.4pi.com-500彩票新版| www.66543.com-福彩3d预测大师| www.066360.com-博彩税税率-| www.127660.com-彩虹秒赞授权| www.9389.biz-3d彩票定时器| www.29387.com-1516.彩票官网| www.595918.com-邢台福彩网-| www.688704.com-好彩一怎么玩| www.853894.com-万彩动画大师手机版| www.805216.com-福利彩票骗局揭秘| www.rh00.com-今日头条专业玩彩| www.87gz.com-三分彩有规律吗| www.03jk.com-中国彩票最大的弃奖| www.763592.com-能买中超足彩的软件| www.823553.com-彩涂铝板的前景| www.940062.com-最新彩票33安卓版| www.xh42.com-彩虹网络电视手机版| www.0876.win-发不了彩票-| www.61258.com-众彩网预测总汇| www.97ni.com-瑞博国际彩票怎么样| www.119026.com-火箭彩票是什么| www.974647.com-七星彩报今期| www.860499.com-武汉竞猜快三| www.328908.com-澳门电子游艺送彩金| www.ij27.com-下彩票-| www.2111.tv-福彩3d13-| www.28253.cc-吉祥彩票源码| www.568191.com-盈众彩票网靠不靠谱| www.263793.com-微信可以买彩票吗| www.ze54.com-一定牛体彩版本下载| www.8788.top-职业高频彩心态| www.005173.com-体彩48l开奖结果| www.803339.com-电视剧《五彩戏娃》| www.660746.com-海南飞鱼彩票| www.9920.top-彩票了刀开机号| www.357558.com-拾到的彩票奖金归谁| www.626044.com-盈丰彩票靠谱吗| www.qk09.com-快三合之规律| www.507653.com-福彩又-| 博友彩www.381772.com| www.lm77.com-中彩网网站地址| www.890725.com-彩票统计软件哪个好| www.393157.com-福彩3d出啥号| www.522356.com-500亿彩票-| www.698247.com-鼎博时时彩人工计划| www.974376.com-极速3分彩票|