QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery仿腾讯云产品列表滚动tab切换代码

原创商用 jQuery仿腾讯云产品列表滚动tab切换代码

jQuery制作腾讯云产品定价tab标签滚动切换产品列表代码。这款选项卡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="container">
	<div class="price">
		<h2>产品定价</h2>
		<div class="category">
			<ul>
				<li class="active">热门</li>
				<li>计算</li>
				<li>存储</li>
				<li>视频服务</li>
				<li>数据库</li>
				<li>网络</li>
				<li>CDN与加速</li>
				<li>互联网中间件</li>
				<li>域名服务</li>
				<li>游戏服务</li>
				<li>通信服务</li>
				<li>安全</li>
				<li>人工智能</li>
				<li>语音服务</li>
				<li>移动服务</li>
				<li>数据处理</li>
				<li>应用服务</li>
			</ul>
			<a href="javascript:;" class="prev"><span></span></a>
			<a href="javascript:;" class="next"><span></span></a>
		</div>
		<div class="cont active">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云数据库 MySQL</h3>
							<p class="desc">一体化多维度监控,高效管理海量数据库</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">对象存储 COS</h3>
							<p class="desc">可靠、安全、易用的可扩展文件存储</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">内容分发网络 CDN</h3>
							<p class="desc">多借点全网覆盖、安全稳定的内容加速服务</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">BGP高防</h3>
							<p class="desc">高达300G的防护服务和多达21线的BGP线路抵御DDoS攻击</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云解析</h3>
							<p class="desc">向全网域名提供稳定、安全、快速的智能解析服务</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">万象优图</h3>
							<p class="desc">高效图片处理、全面的图片鉴定和识别服务</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">直播</h3>
							<p class="desc">专业稳定快速的直播接入和分发服务</p>
						</div>
					</a>
				</li>						
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		<div class="cont">
			<ul>
				<li>
					<a href="#">
						<div class="cont_main">
							<h3 class="title">云服务器</h3>
							<p class="desc">稳定安全,高易用可弹性伸缩的计算服务</p>
						</div>
					</a>
				</li>					
			</ul>
		</div>
		
	</div>
</div>

<script type="text/javascript">
	$(function(){
		//选项卡切换
		$('.category ul li').click(function(){
			indexC = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.cont').eq(indexC).addClass('active').siblings().removeClass('active');
		})
		//按钮箭头
		var catew = $('.category').width()-150;
		var cateLiw = 0;
		$('.category ul li').each(function(){
			cateLiw +=$(this).outerWidth();
		})
		var i =0;
		$('.next').click(function(){
			$('.category ul').animate({
				"margin-left":-catew+'px'
			},500)
			i++;
			if((catew+150)*i+(catew+150)>=cateLiw){
				$('.prev').show();
				$('.next').hide();
			}
		})
		$('.prev').click(function(){
			$('.category ul').animate({
				"margin-left":0+'px'
			},500)
			$(this).hide();$('.next').show();
		})
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
1分快三 www.437999.com-安庆体育彩票店在哪| www.636117.com-彩虹真美阅读及答案| www.788356.com-彩云追星专家专栏| www.873983.com-体育彩票查询双色球| www.994740.com-好彩客网页版网址| www.cw68.cc-必赢彩票苹果下载| www.8kc.com-体彩世界杯单场奖金| www.970879.com-中国福彩中心主任| www.dk77.com-彩票带单老师| www.36ee.com-中国福彩几个球中奖| www.5240.com-派彩金额是什么| www.30nh.com-新浪彩网是骗人的吗| www.004192.com-legou彩票-| www.121315.com-彩票任务群-| www.077813.com-百宝彩账号怎么注册| www.91596.com-彩票预测软件有哪些| www.18771.com-501彩票app-| www.45716.com-重庆时时彩计划在线| www.297808.com-广西快三开奖时间| www.508415.com-新加坡彩票玩法| www.588402.com-彩色五子球下载| www.663608.com-百度乐彩没有了吗| www.740095.com-下载澳彩体育彩票| www.817892.com-足彩19031期| www.606562.com-世界杯足彩下载| www.382151.com-彩票怎样买中豹子| www.507523.com-955娱乐彩票网| www.586228.com-存5元送彩金| www.664209.com-北京赛车赢彩王| www.741346.com-肖立刚推荐湖北快三| www.840791.com-儿童彩妆套装| www.939143.com-699彩票ios版| 吉利彩票www.80075h.com| www.341862.com-pk彩票安卓版下载| www.450780.com-幸运中福彩-| www.556295.com-福彩出奖结果| www.202018.com-快三助手苹果手机版| www.294363.cc-能提现的彩票| www.368915.com-彩票摇奖机的图片| www.464965.com-万豪国际app彩票| www.557206.com-福彩3d迷宫图| www.659514.com-2001年足彩-| www.772416.com-幸运五星彩票官网| www.853747.com-快乐彩票抢红包| www.929720.com-彩票管理条例| 鸿运彩票www.hy6262.com| www.394828.com-周五那种彩票开奖| www.110281.com-鸿运彩票网计划| www.8600.cn-彩球碰撞-| www.64538.com-福利彩票真的假的| www.937536.com-幸运彩票提现不了| 中国福利彩票www.34788u.com| www.93pl.com-淘彩吧唐龙两码和| www.107043.com-竞彩足球官方网站| www.026616.com-黑彩平台怎么赚钱| www.145058.com-福彩3天中图库杀码| www.57yp.com-渭南国贸附近体彩| www.649460.com-正好体育彩票| www.82hb.com-宁波彩票店生意转让| www.65356.com-彩名堂计划怎么看| www.335840.com-私彩平台快三| www.468360.com-湖北快三71-| www.555178.com-汇辰彩票下载| www.514373.com-澳大利亚彩票官网| www.581666.cc-体彩7星彩中4连号| www.660356.com-桥洞研究彩票| www.732055.com-辽宁彩票无人领| www.812739.com-福彩3d中奖绝招| www.888988.cc-如意彩票下载| www.960162.com-布衣图库好彩网| www.cai6511.com快三稳赚不赔方法| www.mj19.com-青海快三号码预测| www.677684.com-快三和值计算技巧| www.496359.com-沁县彩英乐队| www.593690.com-广州七波彩国际真假| www.672357.com-福建体育彩11先5| www.762057.com-体育彩票图片大全| www.824914.com-好彩频道在哪看| www.884358.com-乐彩网排列三论坛| www.947491.com-福彩三地双彩图| www.988039.com-福彩能追加吗| www.ac78.com-五分彩开奖官方| www.315103.com-彩虹糖迷你小豆机| www.180190.com-彩票驿站大发快三| www.934306.com-智博彩票下载| www.h67.cc-福彩3d销售返点| www.695956.com-足彩计算器胜| www.818915.com-易彩云系统福利彩票| www.921505.com-彩神关注-| www.979710.com-帝国彩票金管家| www.2821.cn-好彩店官方app| www.42336.com-求类似k彩的平台| www.995800.cc-统计学足彩| www.kh99.com-中国竞彩网计算器网| www.7wc.com-南粤七星彩空白长条| www.92ea.com-福彩有没有人中奖的| www.774772.com-黄金8彩票网app| www.857518.com-手机里福彩端| www.917643.cc-时时彩开开奖图| www.974131.com-彩研师荐双色球| www.tm9.com-彩票站电视版走势图| www.tv70.com-彩票合买大厅| www.88629.cc-做梦梦到自己中彩票| www.067316.com-正规三分时时彩网站| www.144373.com-快三号码预测一定牛| www.9868.cm-古建彩绘底子怎么做| www.579966.com-七星彩开奖公告| www.0202.website万和城彩票平台| www.526.red-时时彩龙虎咋玩得| www.055143.com-彩色的黑-| www.75fz.com-七星彩领奖日期| www.1025.tv-在线购买大乐透彩票| www.413021.com-彩色防滑路面材料| www.348009.com-七乐彩票邀请码| www.929390.com-福彩群英会下载| www.998106.com-竞彩足球容错怎么买| www.ae67.com-河南快三数据专家| www.02ig.com-刚力彩芽男装| www.25229.cc-彩铅画需要多少色笔| www.281913.com-本期的彩票指南报纸| www.361952.com-描写彩虹的经典诗句| www.441173.com-彩票店中奖后有奖励| www.518743.com-福利彩票18选7| www.90mx.com-六爻测3d彩票方法| www.029084.com-唐龙说彩近期| www.397757.com-局王七星彩排列五| www.093082.com-彩钢围挡图片大全| www.214410.com-具前景的体育彩票店| www.ka09.com-昆山彩票大奖| 中国福利彩票www.34788y.com| www.9509.vip-实名制购彩票的规定| www.85bt.com-彩票签名区在哪里| www.121241.com-起个彩票中奖名字群| www.200976.com-河南快三投注分析| www.nn49.cc-竞彩官网下载| www.00jr.com-描写彩虹鸽的好词| www.71fu.com-图腾彩票对刷| www.0836.xyz-上海彩票机器人投放| www.7712.cm-香港五分彩人工计划| www.20874.com-彩神ix下载平台| www.cp8466.com-10分快三计划软件| www.7660.vip-彩票素材-| 天下彩www.240689.com| www.81pb.com-香港118彩票网| www.28884.cc-中国福彩开结果| www.840207.com-比较正规的彩票平台| www.970439.com-彩票cp816-| www.cai61.cc-今天上海快三开奖| www.69641.com-陕西省福彩快乐十分| www.963821.com-500彩票网页版| www.kn24.com-彩票20分钟| www.62362.com-花样快三套路教学| www.020055.com-大发快三规则| www.098402.com-中彩股份快三内蒙| www.901517.com-今晚福彩3d奖号| www.964340.com-七星彩幸运福星彩版| 500彩票www.50052x.com| 日彩网www.rcw789.com| www.50sr.com-昨日竞彩结果| www.760043.com-全天在线时时彩计划| www.73pz.com-万彩吧字谜总汇| www.07059.com-彩钢板围挡-| www.92237.com-三地彩图-| www.134871.com-龙彩绘-|