QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jquery简洁的tab选项卡切换代码

原创商用 jquery简洁的tab选项卡切换代码

基于jquery.SuperSlide插件制作简洁的选项卡鼠标滑过TAB切换效果,SuperSlide插件扩展性强,方面其它功能使用,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代码

<div class="change-content change-box">
	<div class="change-main">
		<div class="change-cut flex-row">
			<ul class="clearfix">
				<li class="transition tab on">我们的承诺</li>
				<li class="transition tab">我们的实力</li>
				<li class="transition tab" style="border-right:0">我们的角色</li>
			</ul>
		</div>
		<div class="contents clearfix">
			<div class="content flex-row" style="display: block;">
				<a href="#"  target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-009.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">7*24小时售后支持</p>
							<p class="item-p">全国7x24小时客服热线</p>
						</div>
					</div>
				</a>
				<a href="#">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-010.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">100倍故障时长赔偿</p>
							<p class="item-p">100倍赔付终端服务时间</p>
						</div>
					</div>
				</a>
				<a href="#">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-011.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">15天无理由退款</p>
							<p class="item-p">部分产品可享受15天无理由退款</p>
						</div>
					</div>
				</a>
				<a href="#">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-012.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">多对一团队服务</p>
							<p class="item-p">全国80家分公司便捷服务</p>
						</div>
					</div>
				</a>
			</div>
			<div class="content flex-row" style="display: none;">
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-005.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">19年历史</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-006.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">80家分公司</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-007.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">1000名设计师、工程师</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-008.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">120万客户</p>
						</div>
					</div>
				</a>
			</div>
			<div class="content flex-row" style="display: none;">
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-001.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">同行</p>
							<p class="item-p">持续陪伴企业成长,共创,共赢</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-002.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">赋能</p>
							<p class="item-p">帮助企业建立智能经营的能力</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-003.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">连接</p>
							<p class="item-p">为企业连接一切潜在商业价值</p>
						</div>
					</div>
				</a>
				<a href="#" target="_blank">
					<div class="item flex-rows">
						<div class="img-block"> <img src="images/icon-svg-004.svg" alt="img"> </div>
						<div class="item-block">
							<p class="item-title">开放</p>
							<p class="item-p">面向所有企业和伙伴开放共享</p>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	jQuery(".change-main").slide({ titCell:".flex-row li", mainCell:".contents",delayTime:0 });
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了
畅彩 www.82058.com-鼎丰彩票安全吗| www.53078.com-辽宁省福彩举报电话| www.23738.cc-买足彩用什么软件| www.860902.com-大星七星彩走势图| www.3037.cm-国丰彩票-| www.0459.date-360足彩软件| www.786075.com-福彩大赢家高手论坛| www.66857.cc-彩票拍照查中奖| www.044503.com-一分钟快三怎么赚钱| www.139614.com-盈彩网六-| 500彩票www.52072z.com| www.892146.com-竞彩足球串关大奖| www.985553.com-彩票虚拟投注| www.eg62.com-360湖北快三视图| www.13038.com-中国竞彩网支持比例| www.659206.com-多玩彩票是真的吗| www.099389.com-体彩开奖号码排列三| www.217070.com-大发彩票计划| www.066197.com-彩吧开机号近10期| www.577408.com-福彩61玩法| www.658336.com-老彩票网-| www.748989.com-600w彩票网登录| www.299150.com-搜索彩票开奖结果| www.10ou.com-关于彩票真假视频| www.029946.com-好运来大发时时彩| www.627988.com-查上海快三开奖号| www.633246.com-篮球胜负彩怎么玩| www.174311.com-中福彩票骗局| www.762527.com-有什么正规竞彩平台| www.kx4.cc-吉林快三本期开奖| www.20351.com-鸿彩彩票网-| www.424313.com-天天赢彩票平台| www.tt53.com-快三预测软件安卓版| www.82111.cc-8号彩票是马云的吗| www.699277.com-福利彩票17500| www.tv41.com-买彩票输钱了怎么办| www.23175.cc-旭彩网是不是骗人的| www.099262.com-五福彩票苹果下载| www.532107.com-导师带的网上彩票| www.271905.com-博牛彩票下-| 红旗彩票www.39957d.com| 博友彩www.987581.com| www.086970.com-七乐彩中奖等级杏绚| www.39833.cc-彩8彩票正规吗| www.255118.com-28彩票-| www.76ph.com-彩票打票截止几点| www.939425.com-中国福彩票网官网| www.44545.cc-福建体彩中心主任| www.526338.com-王者彩票网会骗人吗| www.620035.com-足彩客胜公式| www.fq9.cc-时时彩漏洞赚钱教程| www.080922.com-魔方彩票-| www.4604.cc-彩票只能在实体店买| www.6080.pro-紫薇彩票好运占卜| www.964186.com-下载中国福彩网软件| www.490.biz-石家庄体育彩票站点| www.6699.name-彩票应用哪个好| www.992789.com-中彩在线不能提现| www.421661.com-四季彩票下载安装| www.420077.com-经营彩票站技巧| www.815193.com-发财网彩票下载| www.404686.com-看七星彩讲解| www.359950.com-约彩365骗人| www.461652.com-乐彩网重庆市彩走势| www.177137.com-一分快三是哪里的| www.067655.com-网上彩票先赢还输| www.78314.com-福彩信息双色球走图| www.739992.com-玩顶尖彩票犯法吗| www.104798.com-彩票中奖得主| www.243300.com-福利彩票奖金多少| www.795726.com-天天彩票的网站| www.62fr.com-ff14仙人彩规则| www.39231.com-好乐多彩票下载安装| www.13vj.com-时时彩任三直选单式| www.137427.com-竞彩足球九场开奖| www.678196.com-福彩三的形态分析| www.746183.com-自助彩票-| www.814175.com-今日体彩排五中奖号| www.51xy.com-快乐彩十分钟开重庆| www.h23.pw-快三几点开始| www.198583.com-彩神网网址-| www.v76.com-彩票搞笑广告语| www.76xh.com-授渔看彩预测| www.1337.cn-体彩和福彩双色球| www.7563.com-幸运三彩票-| www.02uy.com-聚财彩票软件可靠吗| www.cai3277.com玩快三年入十万技巧| www.xt20.com-福利彩开奖-| www.30se.com-福利彩票賺的钱归谁| www.948275.com-3d多彩网彩票| www.dx9.cc-快三彩票加盟| www.754133.com-大乐透彩票几点停售| www.852800.com-常常中体彩店app| www.919209.com-彩票店吃票-| www.981896.com-福彩快三和值| www.fi6.cc-时时彩0369规律| www.qi82.com-好彩1怎么玩| www.915225.com-盈盈彩开户-| 吉利彩票www.80075n.com| www.942837.com-八号彩票官网| 500彩票www.514077.com| www.pa03.com-河北省福彩兑奖地址| www.971.cm-七星彩算法技巧视频| www.5941.cc-全国各地彩礼价格图| www.2071.site-手机壳彩膜-| www.70999.com-qq彩票安全可靠吗| www.126454.com-开彩开奖现场记录| www.206942.com-帮忙投注彩票骗局| www.255024.com-金沙免费送68彩金| www.336300.cc-彩票网提现不了| www.70506.com-福利彩票打印机| www.14nh.com-貂蝉孙尚香星彩无惨| www.23370.com-诚信体彩实体店| www.251225.com-彩票巴士平台| www.96995.cc-竞彩足球停售最晚| www.096694.com-鑫彩网彩票平台| www.176342.com-幸运快三全天计划| www.810276.com-福彩御桥-| www.890956.com-至尊争霸app彩票| www.879692.com-赢彩票与你同行| www.57281.cc-锋彩直播官网首页| www.675557.com-7意彩注册-| www.773743.com-玩时时彩用概率赚钱| www.855786.com-彩票如何定胆| www.099831.com-福彩三天必出胆码| www.06hn.com-福利彩票23期| www.95yy.com-公安部打击黑彩吗| www.3750.cn-大地彩票777dd| www.ml38.com-好彩堂马会开奖结果| www.pm27.com-福彩2d中奖金额表| www.69at.com-皇冠彩下载-| www.3336.win-西安市体彩中心兑奖| www.057086.com-彩吧手机版下载| www.151458.com-精彩网彩票下载| www.984424.com-福利彩票还可以买吗| www.275828.com-多彩网彩票app| www.426510.com-竞彩研究心得| www.539185.com-福彩分析预测| www.136694.com-利彩网443978| www.944178.com-神灯彩票登陆| 众乐彩票www.239644.com| www.649340.com-缅甸博彩业-| www.881502.com-排三走势图彩吧助手| www.974696.com-复式彩票中奖计算器| www.cp1618.com-快三投注门户平台| www.pr64.com-彩神邀请码哪里找| www.26ij.com-6f800彩票-| www.551254.com-优彩网进不去| www.024898.com-福彩票开-| www.097608.com-福彩公益金分配政策| www.603450.com-福利彩票哪年成立的| www.88090.com-彩66平台怎么样| www.380256.com-七乐彩走势图012| www.512795.com-三毛彩吧官网| www.852303.com-彩票七位数开奖结果| www.392771.com-明天能买什么奖彩票| www.264862.com-网站彩票代购靠谱吗| www.352263.com-体彩票兑奖有效期| www.434996.com-彩票代销费怎么拿| www.526372.com-彩民彩票世界杯玩法| www.883131.com-足彩设胆有什么好处| www.969780.com-福利彩票3d揭秘| www.cai3488.com精彩十分开奖走势图| www.338250.com-中山体彩店转让|