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.299329.com-今日彩票开奖结杲| www.294152.com-福彩三地开奖之家| www.544222.cc-缺一门彩票机新闻| www.6396.cm-哈尔滨快三彩票| www.71507.com-腾讯三分彩全天计划| www.62126.cc-彩票遗漏统计软件| www.219024.com-8号彩票登录| www.332208.com-手机版10选5彩票| www.510310.com-泉州彩票店转让| www.645996.com-竞彩高手经验谈| www.789940.com-三的福彩图-| www.030223.com-福彩刮刮乐中30万| www.200322.com-大奖网彩票-| www.397424.com-红旗彩票最新网址| www.505322.com-彩票平台赚钱不| www.8942.me-福彩3d开门彩杀号| www.44bl.com-出彩人生是什么意思| www.2698.in-福彩3d跨度和振幅| www.2wj.com-彩票178走势| www.202291.com-贵州彩票中奖排名| www.524996.com-乐透型彩票指标算法| www.515886.com-云帆彩票平台| www.990707.com-竞彩足球如何能赢钱| www.30qc.com-彩虹世界论坛| www.55321.cc-快三多少倍封顶| www.549342.com-分分彩刷流水方法| 博友彩www.912193.com| www.6766.in-9288彩票网-| www.332436.com-黑彩平台怎么制作| www.447916.com-新浪分分彩2期计划| www.kj38.com-彩票小助手计划软件| www.90xg.com-小米8彩蛋-| www.sb01.com-红牛彩票网站真假| www.192259.com-甘肃快三今日走势图| www.7859.site-河内五分彩最新开奖| www.63687.cc-齐齐哈尔北道彩票| www.149009.com-500彩官网-| www.82000.cc-彩票实战手册| www.yo96.com-中信彩票app下载| www.930369.com-彩票税额-| www.ca51.com-甘肃快三遗漏统计| www.489.win-分分彩5星漏洞教程| www.9038.cm-河内分分彩官网| www.062490.com-v98彩票官方| www.df04.com-全民赢彩票-| www.825810.com-福彩投注点-| 博汇www.717772.com| www.cai0533.com快三网站怎么赚钱| www.392.online-旺彩十一选五计划| www.378925.com-k彩app-| www.603759.com-唐彩66安卓版| www.796410.com-尊彩apk-| www.740746.cc-英股博彩股-| www.897763.com-福利彩票经典广告语| www.am85.cc-苏州市福利彩票中心| www.36.vip-龙岩彩民中双色球| www.658225.com-彩送-| www.06342.com-中国体彩大乐透下载| www.99306.com-重庆时时彩模拟摇号| www.85287.com-中文3d彩漫-| www.116709.com-彩经网杀号-| www.926436.com-彩票数字达人社区| www.cai8803.com大发快三怎么破解| www.604898.com-乐发彩票平台| www.284959.com-湖北快三今日跨度| www.783453.com-福彩三地今天藏机图| www.5009.net-手机用彩膜好不好| www.373148.com-人人买彩票可靠吗| www.632501.com-体育彩票所有的玩法| www.772225.com-时时彩混选52注| www.856018.com-彩站宝网页版登录| www.933590.com-必中彩票下载安装| 博亿彩票www.679by.com| www.380807.com-鲁豫采访彩票大奖者| www.892725.com-大师彩票官网| www.056228.com-湖南彩票官网| www.257805.com-大发快三开奖网址| www.558945.com-夸爱豆彩虹屁| www.762673.com-彩鸿彩票是真的吗| www.ki87.com-辽宁体彩官网首页| www.38ri.com-乐彩双色球诗谜汇总| www.xo05.com-快3派彩网江苏| www.15177.com-温州体育彩票中心| www.295811.com-福利彩票甘肃快三| www.391229.com-下载星彩网-| www.511117.com-张惠妹彩虹| www.729871.com-购彩助手有什么用| www.906238.com-彩色打印机红色偏暗| www.867079.com-福利彩票世界| www.989284.com-微彩站app靠谱吗| www.td14.com-彩色包括什么颜色| www.525.me-重庆时时彩在哪下载| www.8013.com-彩虹伞的玩法教案| www.67250.com-涿州福彩中心在哪| www.119086.com-彩票苹果版本| www.208687.com-福利彩票历史查询| www.8828.loan-彩票白菜发布论坛| www.86066.cc-隔热彩铝板-| www.346971.com-大乐彩票福-| www.77854.com-中国体育彩票电话| www.069823.com-彩票平台彩神| www.554559.com-彩票广告宣传语图片| www.18aw.com-彩票今天的开奖号| www.28566.com-3d彩票计划下载| www.026104.com-77彩票网-| www.215581.com-福彩快三官方直营| www.365915.cc-彩铅幼儿故事画| www.561418.com-山寨cc彩球网| www.675294.com-兴华彩票网页| www.803199.com-捷豹彩票网-| www.874495.com-关注福彩公众号| www.952673.com-大发时时彩可信吗| 网易彩票www.078wy.com| www.1825.top-广西体育彩票得奖者| www.52266.com-亚博彩票安全吗| www.039792.com-福彩3d500-| www.7363.cc-哈市体彩出兑| www.26297.cc-手游彩-| www.65692.com-快三和值追号技巧| www.317323.com-足彩胜负彩技巧| www.395732.com-今天晚彩票开什么号| www.6385.cc-福彩快讯双色球报纸| www.873724.com-官方彩38-| www.yb61.com-天津时时彩分析软件| www.63yq.com-彩优微电子怎么样| www.566803.com-6768彩票网平台| www.653014.com-重庆时时彩计划必中| www.724757.com-帮博彩公司收款| www.6058.cn-双色球守号中奖彩票| www.978919.com-36选7好彩一预测| www.33397.cc-众彩网双色球推荐| www.028558.com-博友彩票首页| www.118765.com-tkcc彩天空-| www.220308.com-彩票网站信誉推荐| www.302670.com-彩票576-| www.289058.com-百博博彩论坛| www.405862.com-北京七星彩内部会员| www.535979.com-容华彩票官方网站| www.219827.com-北京赛车高频彩官网| www.589798.com-老鼠精七星彩| www.843579.com-体彩专管员待遇| www.mx23.com-中国彩吧网首页| www.35283.cc-玩福彩犯法吗| www.168886.com-快三中两个号有钱吗| www.15861.cc-华夏彩票怎么赢| www.95666.com-福利彩票从哪年开始| www.13pd.com-好彩炸金花-| www.0691.win-福彩投注站审批| www.26xq.com-体彩排五的开奖号码| www.778878.com-彩票助赢下载| www.867952.com-海南体彩论坛4十1| www.927662.com-12生肖彩票网| www.wo1.com-福彩今晚中奖号| www.860898.com-山东体彩电话| www.432606.com-福彩高频彩是啥| www.ta24.com-上海11选5爱彩乐| www.666564.com-分分彩四星做号| www.359079.com-时时彩技巧彩票| www.22re.com-福彩主任领奖照片| www.83gq.com-亿彩网娱乐-| www.54481.com-彩票群名称-| www.762692.com-两分时彩有群吗| www.886247.com-彩票单双大小| www.038102.com-喜盈门平台彩票|