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.582655.com-重庆分分彩官方平台| www.52556.cc-下载好彩网网站| www.473062.com-彩虹糖减肥糖果片| www.374.biz-今彩票指南报| 大赢家彩票www.394211.com| www.725825.com-安微省快三结果| www.64sg.com-说彩论赢双色球文章| 天天彩票www.2373d.com| www.595339.com-双彩沦谈3d字谜| www.733127.com-苹果彩铅画-| www.926882.cc-趣彩彩票-| www.67792.cc-体育博彩业分类| www.61iz.com-彩六64-| www.034031.com-篮球彩票258| www.398.cn-家彩网开机号试机号| www.921696.com-彩神8vii-| www.595133.com-新版跑狗图好彩堂| www.699342.com-内蒙古快三综走势图| www.793888.cc-28彩票是真的吗| www.878918.com-福体彩开奖公告| www.958777.com-518彩票下载安装| 大赢家彩票平台www.689253.com| www.982642.com-共享彩票正规吗| www.6462.vip-福利彩票放假| www.102131.com-彩神pk10注册码| 彩民网www.76520m.com| www.64gj.com-彩票开奖大厅通知| www.60vj.com-色彩的三原色是指| www.mn59.com-彩票快3主页| www.132176.com-起诉离婚退彩礼案例| www.69475.com-看彩啦3d-| www.134430.com-好彩烟看真假| www.279716.com-官方分分彩网址| www.982425.com-彩鸿网-| www.885977.com-彩虹的约定儿歌| www.en84.com-重庆快三彩票| www.028722.com-盛彩app-| www.190046.com-超级快三走势图| www.307614.com-35期彩票开奖结果| www.482842.com-彩票中奖几位数| www.670460.com-七星彩打什么奖今晚| www.773743.com-玩时时彩用概率赚钱| www.620323.com-美国都有哪些彩票| www.257173.com-黑彩网站-| www.835633.com-今天好彩一-| www.927612.com-南京福利彩票中心| www.983954.com-彩99合法吗-| www.gg34.com-五分快三走势| www.x62.org-彩之云是骗局吗| www.232751.com-3d彩票技巧-| www.330793.com-大发彩票手机靠谱吗| www.61689.cc-大胜彩票信誉怎么样| www.461313.com-彩票倍数是什么意思| www.552538.com-广东十一选5爱乐彩| www.623882.com-彩47彩票-| www.771710.com-融信彩票是真的吗| www.867208.com-福彩三码遗漏组六| www.63sr.com-彩票最新结果查询| www.u00.win-全国时时彩开奖平台| www.95675.com-福彩5元刮刮乐类型| www.064758.com-乐迎彩票骗局| www.4209.win-七彩网投靠谱吗| www.383212.com-彩票从哪里买正规| www.668525.com-博彩客服工作内容| www.767594.com-牛蛙彩票是哪个网站| www.tg64.com-湖北快三今日跨度| www.131391.com-信阳彩礼一般多少钱| www.rv70.com-南方双彩网手机版| www.0800.tv-彩播什么意思| www.tj44.com-真实彩票网站| www.7ui.cc-彩票中奖周围人| www.63nr.com-北京昨晚快三走势图| www.341059.com-福彩双色球机兑奖| www.868316.com-什么是亿彩-| www.458426.com-彩票开奖走势网首页| www.00547.com-福彩3d字迷多彩网| www.vf95.com-江苏快三乐采购| www.65rj.com-彩票代打兼职包赔| www.5769.in-美狮彩票平台| www.21893.cc-七乐彩选号器| www.079842.com-有没有玩快三的群| www.285725.com-上海快三走势图跨度| www.514006.com-开原琳彩-| www.673025.com-体彩外挂-| 网易彩票www.096wy.com| www.j66.me-深圳福彩发行中心| www.880170.com-福彩3d杀号专家| www.i24.xyz-搜索福利彩票信息| www.6839.biz-即开型彩票中奖率高| www.164569.com-彩票害人知乎| www.324319.com-中国福利彩票鲍学全| www.441377.com-百宝彩视电话| www.670251.com-彩票排位五-| www.696388.com-彩神帝下载-| www.123425.com-新昌双彩下岩张玉安| www.262330.com-彩票图吧-| www.23384.com-d8彩票下载-| www.554779.com-彩票投注金额计算| www.007081.com-时时彩qq群推广| www.122805.com-天天彩票是合法的吗| www.233390.com-内蒙快三杀号| www.xj65.com-400500好堂彩| www.893785.com-喜盈门平台彩票| www.115019.com-app星光彩票| www.071144.com-上海招聘竞彩分析师| www.93990.com-内蒙古快三查询表| www.68879.com-下头奖彩票-| www.128239.com-福彩双色球有没有假| www.224686.com-快三遗漏技巧| www.301435.com-彩鸿彩票有问题吗| www.218393.com-网上怎么购买快三| www.666690.com-乐彩客安全吗| www.785086.com-乐米炫彩下载安装| www.867770.com-七星彩现场开奖直播| www.967458.com-合买彩票群起啥名| www.cai8567.com大发彩票下载安装| www.4321.ren-发彩彩票合法的吗| www.798923.com-qq彩票用不了| www.863829.com-怎么买彩票-| www.916024.com-鸿彩快三正当吗| www.974018.com-浪琴一天快三秒| 500万彩票www.583792.com| www.552273.com-大家赢彩票网合法吗| www.653874.com-360彩票遗漏遗漏| www.804025.com-喜欢上彩票托照片| www.878234.com-牛彩网3d图谜汇总| www.951534.com-红彩网软件-| 亿万彩票www.771746.com| www.39518.cc-豪彩分分彩-| www.020077.com-中彩网三地推荐号码| www.081903.com-福彩总局-| www.4755.net-领彩票奖金被杀| www.031301.com-易中奖彩票-| www.530061.com-旧版彩库宝典苹果| www.670783.com-俄罗斯皇家国际快三| www.755761.com-多彩苹果-| www.855820.com-七乐彩复式对照表| www.s91.net-呼市福彩机转让| www.47ne.com-d大通彩票登录网站| www.44565.com-彩票长龙一般何时| www.93712.cc-网易彩票推荐| www.050301.com-在黑彩打工是犯罪吗| www.704001.com-竞彩足球合买骗局| www.577817.com-黑彩输钱怎么追回| www.631869.com-七彩背景-| www.667806.com-体彩开奖结果息| www.032633.com-彩宝贝网站-| www.f23.org-支持提现彩票app| www.286958.com-彩票安徽快三怎么玩| www.f23.biz-万达彩票合法吗| www.935998.com-大发福彩官网| 天天彩票www.105636.com| www.363125.com-天彩app官网| www.177969.com-安徽快三爱彩乐| www.261458.com-内蒙福彩快3玩法| www.161028.com-网赌248彩票| www.17524.com-云南保山彩票店加盟| www.716774.com-彩铅鸢尾花-| www.9713.loan-大奖网彩票下载安装| www.4561.in-凤凰彩票靠谱么| www.7309.vip-彩虹六号战队创建| www.19911.com-福彩十二生肖下载| www.492253.com-县政府卖彩票合法吗| www.589790.com-似曾相识足彩|