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天

知道了
彩01彩票 www.119106.com-香港福彩门户资料| www.219370.com-彩钢围挡图片| www.319253.com-m8彩票软件下载| www.7259.biz-怎样开通彩虹e台| www.bo4.com-上海福利彩票| www.r76.me-福彩快三有什么技巧| www.277543.com-什么彩票稳赚不赔| www.813332.com-福彩3d遗漏查询| www.992681.com-中国足彩馆网站| www.21re.com-盛源彩票登录| www.iz1.com-内蒙古快三官网| www.778476.com-彩乐园网址-| www.094333.com-3地彩票-| www.266017.com-娱乐快三走势图| www.448398.com-上海快三计划官方吧| www.54iu.com-福彩三d大湖谜语| www.32752.cc-福彩彩-| www.084615.com-西西彩票ios| www.639604.com-申请竞彩的条件| www.981483.com-彩票专家查询| 818合彩www.www.5666hc.com| www.101472.com-玩分分彩心得| www.975014.com-福利彩票走势图| www.ac10.com-体育彩票中奖号码| www.ye77.com-快三组合图-| www.jx5.com-彩吧图-| www.04433.com-安徽彩票案-| www.9521.cm-求海南私彩投注网| www.460078.com-炫彩背包解锁颜色| www.224277.com-精彩十分玩法走势图| www.93519.cc-丹麦28是私彩吗| www.91185.cc-日免软红好彩| www.236025.com-澳客网彩票官网| www.320087.com-全国各地彩票开奖| www.387098.com-七彩球中奖号| www.111018.com-御彩轩ios-| www.116308.com-胜负彩19044| www.254277.com-彩票十分钟开奖号| www.349900.com-绝望中买彩票中大奖| www.445333.cc-排列五彩票图纸| www.540554.com-山东福彩群英会下载| www.86819.cc-彩票密码破解工具| www.592.cm-ddos攻击博彩| www.83mz.com-黑彩网站泛滥| www.298836.com-福彩3d奖号今天| www.wq09.com-中彩网11选5| www.466254.com-台码福星彩开奖网站| www.312293.com-全彩本子库5d| www.539122.com-时时彩梭哈技术| www.qm55.com-投诉博牛彩票| www.6010.vip-打彩票什么到底意思| www.257530.com-中彩网重庆时时彩| www.02rp.com-测彩高手双色球专栏| www.98223.com-美国一分彩走势图| www.140045.com-网上购彩票如何兑奖| www.540062.com-古风女背影彩铅画| www.84ny.com-福州自助彩票店| www.839583.com-红米竞彩-| www.99474.com-长沙福彩中心地址| www.961673.com-彩友网bhcyw| www.73715.com-香港二分彩-| www.291675.com-基诺彩票投注技巧| www.ff68.com-泰安大乐透3亿彩票| www.660118.com-用人工智能算彩票| www.ra51.com-35彩票网-| www.1866.in-网投体彩是什么意思| www.227754.com-众彩乐手机版下载| www.321051.com-好运来时时彩网站| www.679061.com-打彩票上瘾倾家荡产| www.447883.com-下载老徐说彩| www.582048.com-乐玩彩app-| www.500085.cc-078彩票计划| www.407027.com-七星彩公告-| www.75638.com-彩票和值投注技巧| www.716221.com-古风女子彩铅画教程| www.662251.com-体彩竞彩兑奖有效期| www.254016.com-七星彩加急版| www.335469.com-体育彩票怎么买号| www.009521.com-华彩彩票登录网址| www.lt41.com-三分时时彩全天计划| www.46wh.com-乐彩双色球字迷专区| www.868532.com-北京快三反水| www.84mz.com-新彩华章干嘛的| www.546257.com-竞彩几串几什么意思| www.727078.com-2000彩平台-| www.801154.com-彩71网站-| www.d06.org-易彩堂彩票网站下载| www.58ig.com-大乐透彩票购买时间| www.243652.com-下载1516购彩| www.334887.com-江苏快三下期推荐号| www.422329.com-最好听的彩铃排行榜| www.7677.cm-体彩彩票代码字母| www.37055.cc-彩票猫腻-| www.006473.com-福建体彩开奖| www.40714.com-中彩江苏快三| www.39516.cc-正版大花虎彩图| www.578251.com-体彩甘肃-| www.676185.com-仲博彩票登录平台| www.385277.com-彩票王素英-| www.532702.com-365天天彩票官网| www.616599.com-如何买竞彩-| www.706278.com-大发快三杀码| www.789154.com-胜负彩44期-| www.877540.com-七乐彩十大专家预测| www.974149.com-腾讯彩票平台| www.l94.cn-福彩彩票走势图大全| www.716825.com-出售送彩金彩票平台| www.76628.cc-棋牌注册送彩金| www.32rm.com-合肥快三连线走势图| www.7869.cc-体彩七星彩29期| www.699802.com-玩彩票输钱了怎么办| www.jb43.com-辽宁福彩网官方首页| www.04ki.com-水溶彩铅教程| www.250010.com-中彩彩票用户注册| www.344257.com-彩神5分快3-| www.ht30.com-江苏体育彩票大乐透| www.f68.top-华人彩票靠谱吗| www.xl34.com-关于鑫彩网-| www.12tu.com-好彩薄荷-| www.99904.com-金福彩票jf-| www.890865.com-手机至尊争霸彩票| www.660523.com-足球彩票500网| www.737844.com-山东体彩论坛双彩网| www.811025.com-乐娱彩票-| www.878726.com-南昌体彩销售排行榜| www.997050.com-湖北快三一定牛下载| www.dh83.com-经典快三-| www.948704.com-高频彩主播直播| www.979570.com-快三豹子算红的不| www.34416.com-双色球乐彩网首页| www.18.link-三亚抓私彩-| www.446399.com-中彩网最准单双四肖| www.574722.com-排零五彩票-| www.26296.com-吉林时时彩走势图| www.99844.com-彩票168官网| www.778054.com-双色球中奖彩票票面| www.963966.com-彩票保本翻倍模式| 600彩票www.336766.com| www.mc27.com-wcp玩彩票app| www.0tf.com-千百万彩票登录| www.83ef.com-喝彩中华蔡正仁| www.1984.com-中华彩吧怎么样| www.352608.com-举报黑彩网站有用吗| www.043444.com-广西体彩网官方网| www.948485.com-彩运8平台是真的| www.sh61.cc-92彩票app-| www.26nn.com-快三彩票输倾家荡产| www.047.xyz-爱玩彩-| www.22770.com-快三赌徒-| www.72291.cc-86彩票app下载| www.021347.com-大同彩票网站地址| www.2908.cc-体彩自助售卖机价格| www.513029.com-微信代购彩票安全吗| www.42136.com-23彩票软件注册| www.369540.com-旺旺时时彩-| www.477017.com-8g彩票网站-| www.196770.com-新加坡南洋彩开奖| www.539038.com-众乐彩票靠谱吗| www.636548.com-新浪爱彩高频走势图| www.785425.com-菲律宾博彩客服招聘| www.75320.com-九五彩票网站| www.311.com-金巴黎彩票网登录| www.26770.com-七星彩胆拖图片| www.74815.com-福利彩票骗局揭秘|