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.222463.com-彩票长龙一般多长| www.9527.date-星期几可以买彩票| www.bg25.com-黑彩票网站排名| www.37bh.com-福彩排列五哪天开奖| www.798853.com-88彩票网手机登录| www.950694.com-福彩3α论坛| www.wl97.com-凤凰彩票破解| www.187139.com-重庆福彩官方网站| www.480584.com-新浪国际彩票合法吗| www.978194.com-彩钢板围挡施工图| www.881432.com-一定牛竞彩篮球| www.901445.com-网上彩票导师| www.253908.com-广西福彩快3走势| www.393119.com-彩铅荷花图-| www.677677.cc-南方福彩下载| www.786925.com-华彩娱乐登录网址| www.874487.com-老杨说彩-| www.943205.com-七星规律彩票| www.991318.com-彩票126期-| www.je18.com-发彩首页-| www.1oa.com-合肥阜南路体彩店| www.nd72.com-3d彩票大赢家| www.3360.tv-彩票如何购买| www.89973.cc-七星彩机选投注在线| www.uu95.cc-手机购彩直播快三| www.v64.cn-上海快三计划微信群| www.079258.com-全民星彩官网| www.443618.com-七乐彩今天出号| www.qe18.com-好彩3怎么中奖| www.2387.space-新西兰彩票种类| www.9258.me-82彩票下载安装| www.83265.com-彩票平刷原理| www.094455.com-体彩19025期| www.167790.com-宁夏快三开奖号码| www.760206.com-福彩彩票机保障| www.192267.com-双彩论坛分类平台| www.380021.com-什么的彩虹桥填空| www.63876.cc-退还彩礼的三个条件| www.123864.com-体育彩票20选5| www.344258.com-快钱彩票网址入口| www.521953.com-中国彩官网下载| www.33xq.com-大奖彩票网上购买| www.349.net-柬埔寨博彩客服招聘| www.685828.com-工行银彩通-| www.791656.com-彩票11选五内蒙古| www.881384.com-足球博彩软件下载| www.948957.com-3d彩票彩图下载| 福利彩票www.8039j.com| www.319653.com-中国福彩3d金码| www.408438.com-七星彩画规律表下载| www.934705.com-gd平台盈彩网| www.5907.cm-人民币彩礼图片| www.b10.live-彩票河北福彩排列七| www.54eo.com-1分快3乐彩33| www.236705.com-连中彩票和全民彩票| www.606422.com-还能用的足彩app| www.444028.cc-淘宝快三购买技巧| www.021963.com-快三对应码-| www.100305.com-人民网互联网彩票| www.834550.com-欧盟好彩爆珠| www.fu04.com-彩票带人计划| www.9610.org-彩米-| www.859722.com-福利彩票最近走势图| www.aa19.com-快三开奖结果河北着| www.227333.com-七天彩下载app| www.491992.com-彩票站有哪些违规| www.080105.com-福彩中彩网走势| www.44bd.com-好彩一综合走势图| www.2119.cm-一分彩彩票软件下载| www.760.tv-e球彩多少期| www.551987.com-体育彩票周一开什么| www.712027.com-盛兴彩票手机登录版| www.825661.com-福彩河北快三微信群| www.920699.com-彩神大发最高邀请码| www.988560.com-中国官网中福快三| www.dw51.cc-彩福彩票aq-| www.806763.com-7号彩票网址| www.870701.com-cp彩票下载苹果| www.21301.com-彩票网站诈骗| www.76sl.com-3d福彩票开奖号码| www.3035.pw-福彩网是干什么的| www.8569.top-幸运彩票是真的吗| www.36993.cc-559彩票软件| www.81684.com-快三中多少钱| www.030951.com-永乐彩票下载| www.115377.com-彩铅画入门图片| www.193012.com-我想买彩票怎么买| www.274562.com-快三把我害惨了| www.6261.cc-体彩20选5奖| www.259847.com-福彩数字3开奖号码| www.333310.cc-安徽快三在线| www.682530.com-体彩竞彩微信群| www.775350.com-彩富网高手-| www.872019.com-彩票之家开奖| www.929099.com-七星彩杀号定胆| 百姓彩票www.bxcp3.com| www.jt96.com-贵州福彩快三规则| www.g45.cc-大发快三作弊器官网| www.94nm.com-基诺彩票开奖| www.03688.com-购彩2app-| www.485369.com-福彩行业工作| www.589208.com-南国彩票41论坛| www.675365.com-中国福彩神牛嚼图| www.024748.com-红包彩票玩法规则| www.092713.com-福建福彩电脑版| www.150510.com-澳门快三开奖| www.234744.com-彩票游戏平台| www.304224.com-快3派彩网下载| www.91066.com-用于开幕式彩烟| www.91144.cc-无嘴好彩香烟多少钱| www.066574.com-苹果能玩的彩票软件| www.183123.com-福彩3d走势图表图| www.778462.com-彩乐园应用下载安装| www.902975.com-彩票网站建设怎样做| www.973414.com-彩虹儿歌歌词| www.700352.com-7星彩兑奖-| www.805379.com-七乐彩可以买多期吗| www.894357.com-福彩快三过滤工具| www.965979.com-福彩快三的危害| 博友彩www.662182.com| www.mr09.com-七乐彩怎么玩法| www.10zy.com-宁波福彩时时彩网| www.842.date-星际彩票app下载| www.6970.in-时时彩后2技巧| www.691137.com-8k彩票是不是骗局| www.814288.com-红玺国际网上彩票| www.954282.com-8亿彩-| www.uo69.com-内蒙体育彩票活动| www.15725.cc-画彩铅工具-| www.80799.com-彩票基本-| www.7494.cc-体彩机器转让多少钱| www.21663.cc-帮别人代玩彩票兼职| www.632389.com-彩票中奖领奖视频| www.305573.com-买彩票的流程| www.659720.com-双彩球开奨-| www.330828.com-彩票争霸是真的吗| www.501359.com-易彩堂可以赚钱吗| www.280365.com-重庆时时彩平台代理| www.379520.com-缅甸彩票官网| www.532957.com-福彩开彩时间| www.626948.com-nba体彩购买技巧| www.751429.com-陶彩票app-| www.927663.com-福彩中几位数有奖| www.kz6.cc-快三跨度-| www.g39.club-体彩排三彩经网| www.961.tv-更多彩种购彩| www.562503.com-秒速赛车彩票技巧| www.659843.com-彩票中奖技巧软件| www.727919.com-开七星彩直播现场| www.019276.com-遵义务川福彩中心| www.503833.com-博雅彩-| www.630039.com-明天3d彩票出奖号| www.711004.com-约彩365下载官网| www.292969.com-河南高频彩-| www.839326.com-49期胜负彩预测| www.20942.com-彩票高手视频| www.026381.com-今晚私彩开什么| www.083561.com-最新彩票指南电子报| www.651495.com-稳赚不赔的玩彩方法| www.757668.com-福利三分彩有规律| www.853623.com-天津市好彩数码印刷| www.207112.com-五分快三计划网址| www.561995.com-彩票滚球什么意思| www.639256.com-上海市福彩-|