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.817340.com-体育彩票停售时间| www.1708.cm-湖北快三大小| www.914117.com-彩乐园2-| www.495532.com-谁手机博彩过| www.590269.com-七星彩最近开奖图片| www.49kj.cc-宝赢彩票软件破解| www.344676.com-棋牌和彩票哪个好做| www.668701.com-七星彩中二个数字| www.767858.com-华夏彩票手机版下载| www.853724.com-每日头条彩票| www.931095.com-彩八仙人工计划官网| 华亿彩www.cai003.vip| www.047042.com-安徽快三胆拖投注表| www.053818.com-足彩19051任九| www.838401.com-安徽快三走势图一| www.114809.com-彩皇网的计划可信吗| www.731933.com-爱彩彩票怎么登录| www.682300.com-微信公众号买足彩| www.433113.com-菜店彩票-| www.134211.com-中免绿好彩好抽吗| www.878158.com-高频彩最稳倍投技巧| www.3663.bid-彩票32app-| www.125439.com-快三最新玩法| www.112503.com-933彩票下载苹果| www.rn57.com-腾讯qq彩票app| www.8941.cc-什么叫地下彩票| www.118210.com-浙江体彩网站| www.73718.com-世界杯体彩在哪里| www.25939.cc-彩虹屁100句| www.490811.com-支付宝能买彩票| www.042333.cc-快易彩下载-| www.201184.com-七星彩十大专家预测| www.3652.cn-鸿福彩票是国家的吗| www.534954.com-导航彩香港-| www.671453.com-123六开彩开奖| www.655822.com-快三哪种玩法好中奖| www.2849.org-豪彩娱乐系统维护| www.176323.com-十分快三精准计划网| www.286166.com-中国河南福彩快三| www.382960.com-丰隆彩旸香江价格| www.384894.com-彩票靠谱平台有几个| www.139440.com-微信彩票游戏赌博| www.232889.com-黑龙江体彩官方网| www.001878.com-七星彩能买复式的吗| www.959153.com-快乐十分彩票下载| www.968810.com-乐彩ⅴip-| www.fe6.cc-网络分分彩骗局| www.309817.com-体育彩票足球胜平负| www.432107.com-天空彩票与开奖问行| www.557923.com-爱购彩手机版| www.631593.com-顺丰彩票游戏| www.730158.com-福彩3d真精华布衣| www.862348.com-全国各种彩票开结果| www.954785.com-彩票今晚出什么| www.zq09.com-竞彩篮球在哪里买| www.8674.pw-91彩票计划方案| www.653268.com-福彩103期-| www.727558.com-山东省体彩app| www.825654.com-湖南福骰快三开奖| www.mn5.cc-搜河北快三开奖结果| www.11667.cc-98福彩网-| www.52679.cc-好彩店官网首页| www.97396.com-福彩三d精选一注| www.054598.cc-快三开奖结果遗漏| www.144783.com-湖北体彩网3d| www.682245.com-足彩手机怎么买| www.400821.com-体彩顶呱刮7票| www.546944.com-派彩走势图下载安装| www.00uy.com-彩票撕掉了一个角| www.699601.com-福彩3d购彩公式| www.786009.com-xs原彩要不要开| www.869030.com-七星彩最近500期| www.974409.com-28彩票平台注册| www.mu3.com-吉林快三预测| www.sb01.com-红牛彩票网站真假| www.25ue.com-福彩票银海报| www.083211.com-分分钟彩票正规吗| www.058871.com-彩99安卓客户端| www.175981.com-分分快三破解软件| www.528390.com-微彩店下载-| www.613187.com-宁夏体彩兑奖地点| www.708456.com-杭州体育彩票网址| www.803553.com-年后七星彩何时开奖| www.887368.com-天下特彩吧网| www.963614.com-官网500彩票下载| www.cp849.com-快三开奖预测软件| www.pj05.com-手机中国体彩网提示| www.469699.com-快乐5分彩走势图| www.312888.com-聚鑫网彩票是真的吗| www.gm32.com-江苏快三开奖有假吗| www.024473.com-江西福彩玩法介绍| www.115667.com-彩色水磨石地面| www.bm49.com-大发彩票网站合法吗| www.8074.me-水彩大师约瑟夫| www.182156.com-福彩选号器-| www.270800.com-福彩快3官方| www.591175.com-送彩礼和嫁妆问题| www.42lf.com-体育彩票开奖视频道| www.263175.com-世界杯彩票去哪买| www.506702.com-彩世界网站-| www.299965.com-高频彩票app| www.20qi.com-2月16日体育彩票| www.036285.com-五分彩官方app| www.125631.com-彩票最新开奖号| www.46584.com-大众彩票网首页| www.863272.com-新浪体彩数字彩票| www.196154.com-河南省快三遗漏数据| www.557924.com-免费注册凤翔彩票| www.520567.com-福彩快三限号规定| www.850165.com-qq分分彩开奖统计| www.951787.com-彩票能中吗-| www.bg79.cc-彩票端靠谱吗| www.31102.com-体彩中大奖-| www.155005.com-体彩竞彩几种玩法| www.060868.com-彩客站软件-| www.o90.com-婚内买彩票中奖| www.0741.xyz-七乐彩怎么购买| www.29ct.com-体彩昨日开奖| www.368133.com-彩铅上色-| www.486364.com-足彩半全场中奖规则| www.575563.com-好的手机彩票app| www.668433.com-福彩三d开奖直播| www.6769.cc-三位数字彩票怎么买| www.41848.com-高频彩票传统彩票| www.878064.com-惠州彩票店转让信息| www.441384.com-七星彩梦册查奖| www.3805.com-关小刀竞彩-| www.472244.com-重生美国之中彩票| www.561297.com-彩票交流网-| www.628550.com-上饶福彩中心电话| www.698409.com-七色彩虹是什么意思| www.772438.com-7星彩票开奖走势| www.960026.com-快三概率公式| 百姓彩票www.bxcp3.com| www.hr05.com-贵州福彩官网| www.yf15.com-网福彩8-| www.118223.com-体彩20选5预测| www.220138.com-百盈彩票邀请码| www.336150.com-彩票开奖太湖| www.245885.com-118彩票app-| www.328600.com-福彩快3技巧论坛| www.385728.com-福彩几个月过期| www.465430.com-天霁彩票预测网| www.cp415.cc-湖北快三每天必出号| www.827858.com-彩民网是哪个app| www.913557.com-台湾福彩星开奖直播| www.984974.com-褔彩3d丹东全图| www.da95.com-彩神11是官方| www.565596.com-福彩中奖怎么派奖| www.440679.com-五百彩开奖-| www.700018.cc-竞彩跟单能赚钱吗| www.799464.com-彩吧彩票勇士团队| www.982613.com-盈彩的意思-| www.pw34.com-71彩票app-| www.34wb.com-35期7星彩-| www.533860.com-明发彩票是真是假| www.305908.com-福利彩下载-| www.397472.com-m8彩票官网-| www.385692.com-天津时时彩计划| www.45dc.com-四平彩票店出兑| www.299516.com-体彩7星彩开奖查询| www.356492.com-做外卖能送彩票吗| www.411986.com-家彩网杀码3d| www.495113.com-重庆高频彩票|