QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jQuery仿支付宝导航tab切换菜单代码

原创商用 jQuery仿支付宝导航tab切换菜单代码

jQuery制作支付宝商家页面顶部,宽屏的导航下拉tab菜单切换代码。这是一款实用的功能平台网站导航菜单切换代码。
分享到微信朋友圈
X
[声明]该素材属于原创商用,未经允许请勿转载,内有版权说明,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="bar">
	<div class="w1200">
		<div class="left">
			<a href="#">个人</a>
			<a href="#">商家</a>
		</div>
		<div class="right">
			<a href="#">登录</a>
			<a href="#">注册</a>|
			<a href="#">接入指引</a>|
			<a href="#">开放平台</a>|
			<a href="#">帮助中心</a>
		</div>
	</div>
</div>

<div class="nav">
	<div class="w1200">
		<div class="logo">
			<img src="statics/images/logo.png" />
		</div>
		<ul>
			<li class="active one">
				<a href="#">首页</a>
			</li>
			<li>
				<a href="#">接入指引</a>
			</li>
			<li>
				<a href="#">产品大全</a>
			</li>
			<li>
				<a href="#">解决方案</a>
				<div class="son">
					<div class="w1200">
						<div class="category">
							<dl>
								<dd class="selected">
									<a href="#">商业消费</a>
								</dd>
								<dd>
									<a href="#">政务民生</a>
								</dd>
								<dd>
									<a href="#">共享经济</a>
								</dd>
							</dl>
						</div>
						<div class="list active">
							<dl>
								<dd>
									<a href="#">
										<span class="title">3C行业解决方案</span>
										<span class="desc">3C数码行业的消费信贷解决方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">酒店行业解决方案</span>
										<span class="desc">星级与连锁酒店支付对账与会员营销解决方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">海淘行业解决方案</span>
										<span class="desc">解决进口跨境电商行业中支付单申报痛点</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">数字阅读解决方案</span>
										<span class="desc">数字阅读行业支付、营销等场景的整体解决方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">视频直播解决方案</span>
										<span class="desc">适用长(短)视频、直播等不同业态的解决方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">停车行业解决方案</span>
										<span class="desc">提升停车场管理效率,创新商业模式</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">旅游景区解决方案</span>
										<span class="desc">为景区景点订制的支付与营销解决方案</span>
									</a>
								</dd>
							</dl>
						</div>
						<div class="list">
							<dl>
								<dd>
									<a href="#">
										<span class="title new">智慧城市解决方案</span>
										<span class="desc">推进互联网+政务创新升级</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title new">医疗行业解决方案</span>
										<span class="desc">帮助医患双向减负,看病就医更简单</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title new">物业行业解决方案</span>
										<span class="desc">提升物业管理效率与服务体验</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">运营商行业解决方案</span>
										<span class="desc">运营商线上服务渠道方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">物流行业解决方案</span>
										<span class="desc">物流行业的资金管理解决方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">客运行业解决方案</span>
										<span class="desc">客运行业扫码付款、电子票解决方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">中小学、幼儿园缴费解决方案</span>
										<span class="desc">解决中小学、幼儿园缴费问题</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title new">公交乘车码解决方案</span>
										<span class="desc">助力公共交通机构的互联网化转型</span>
									</a>
								</dd>
							</dl>
						</div>
						<div class="list">
							<dl>
								<dd>
									<a href="#">
										<span class="title new">无人值守场景解决方案</span>
										<span class="desc">为场馆、园区提供人员核身、服务结算的解决方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title">共享单车解决方案</span>
										<span class="desc">共享单车收付款与信用免押金服务解决方案</span>
									</a>
								</dd>

								<dd>
									<a href="#">
										<span class="title new">共享充电解决方案</span>
										<span class="desc">为商家提供的自助充电设备解决方案</span>
									</a>
								</dd>

							</dl>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>

<div class="banner">
	<img src="statics/images/banner.jpg" />
</div>

<script type="text/javascript">
	$(function() {
		$('.nav li:not(.one)').hover(function() {
			$(this).toggleClass('active');
			$(this).find('.son').toggleClass('active');
		})
		$('.son .category dl dd').click(function() {
			var i = $(this).index();
			$(this).addClass('selected').siblings().removeClass('selected');
			$('.son .list').removeClass('active').eq(i).addClass('active');
		})
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

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

签到成功!

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

知道了
强国彩 www.746.in-时时彩和值与跨度表| www.1359.vip-福利彩票是不是真的| www.36683.cc-梦到彩票号码却不中| www.000411.com-万彩动画大师官网| www.201058.com-福彩快三专业版下载| www.920240.com-好彩票原来的官网| www.93556.cc-上海快三电脑版| www.107669.com-竞彩一周销量| www.220097.com-快三杀号免费软件| www.340005.com-彩票中大奖人的生活| www.500114.com-彩票下单助手正规吗| www.989765.com-湖北快三直播画面| www.id82.com-义乌体彩网-| www.t27.biz-今天七乐彩免费预测| www.59hb.com-体彩下期中奖号码| www.663588.com-新浪彩票学堂| www.ff54.com-福利彩票十分钟开奖| www.9372.online国家彩票原主任| www.941345.com-时时彩加盟代理流程| www.300500.com-送彩金的彩票app| www.436822.com-能智能统计的彩票| www.000522.com-嘉兴体彩官网| www.17rf.com-新浪彩票一新浪网| www.781516.com-吉林快3黑彩庄家| www.450025.com-彩店宝彩票怎么提现| www.979527.com-好彩印第安铁盒| www.08nl.com-合买彩票中奖案例| www.520.gg-m5彩票手机登录| www.9602.xyz-神马彩票网页| www.931903.com-中彩票图片恶搞图| 大赢家彩票网www.54400j.com| www.173114.com-武汉快三开奖结累| www.926700.com-256+cm彩票-| www.983119.com-上海快三开结果| www.dr00.com-快彩助手发来验证码| www.6cv.com-开体彩店怎么打票| www.665265.com-彩票报-| www.76598.cc-快三怎么守号中大奖| www.070091.com-快三手机app下载| www.087860.com-网上赌彩票的危害| www.867757.com-七星彩开奖是几点| www.990044.com-中彩网时时彩怎么样| www.cj46.com-快三大平台-| www.k84.net-网络彩票输了想死| www.783609.com-cc分分彩有问题| www.31258.cc-易彩票二维码| www.84336.com-足彩竞猜必发指数| www.5816.cm-竞彩6场3关怎么算| www.322381.com-精英彩票高手论坛| www.00487.com-手机彩票软件提现| www.78966.cc-3d彩票怎么兑奖| www.531841.com-念什么咒能中彩票| www.653591.com-玖富彩票怎么下载| www.288667.com-福彩快3福建| www.21367.com-今天竞彩足球跟单| www.396289.com-彩票中心会放假吗| www.577220.com-好彩投彩票官网| www.705991.com-发彩人生-| www.855318.com-福利彩票3d徐柯| www.8926.org-全天彩票计划分析| www.442377.com-58同城春天彩票| www.587198.com-买天天彩票被骗| www.683528.com-云购彩票彩神| www.757392.com-足彩任九最低奖金| www.819638.com-彩票易中奖平台| www.883964.com-体彩七位数中奖规则| www.cp019.com-彩票神州app| www.jm40.com-中国足球竞彩网官网| www.a11.in-新浪彩票客户端| www.514490.com-彩钢工程图纸| www.603030.com-彩虹6号腾讯| www.766997.com-福彩中奖号是多少| www.501001.com-画彩色的梦-| www.849749.cc-怎么玩体彩-| www.515.space-我的幸运数字彩票| www.cai2711.com五分快三技巧| www.22277.com-时时彩高手实战技巧| www.516927.com-色彩与光关系| 500彩票www.404099.com| www.595677.com-分分时时彩官网| www.689146.com-网络彩票下载| www.778005.com-怎么登录汇彩网| www.871458.com-买彩票多少钱| www.971655.com-下载彩票248| www.ja4.com-快三大小计划网站| www.sp54.com-e球彩历史数据| www.83998.cc-周三彩票开什么| www.989914.com-彩漂液的作用| www.930661.com-彩票交税标准| www.776103.com-假彩票机器-| 豪彩VIPwww.001865.com| www.17344.com-首存赠送彩金大全网| www.730508.com-天天竞彩官网首页| www.716825.com-出售送彩金彩票平台| www.795970.com-全彩网八仙过海| www.868229.com-易彩网怎么样| www.18ol.com-什么的彩虹填词语| www.893739.com-千亿彩票app| www.jn96.com-5亿彩骗局-| www.34067.com-55l25中国彩吧| www.025636.com-必发彩票网官方网址| www.100700.com-乐彩客彩票安卓版| www.110127.com-台湾乐透彩開獎网址| www.169211.com-十分快三-| www.150098.com-全民彩票连中彩票| www.54ms.com-福彩销售员演讲稿| www.53hq.com-香港分分彩主页| www.158144.com-500彩票北单| www.225334.com-时时彩正规网站| www.299808.com-彩票如何选号| www.82qm.com-足彩买单场胜怎么买| www.gq73.com-广州哪里有好彩烟| www.37ar.com-七星彩彩迷网| www.252003.com-彩经网官方下载苹果| www.667940.com-乐城彩票注册| www.803282.com-彩票返奖率-| www.662038.com-南通体彩中心领奖| www.886312.com-彩铅画图片大全简单| www.983722.com-好运彩票-| www.tw96.com-中国手机彩票网论坛| www.92122.com-福彩双色球22选5| 500彩票www.330175.com| www.999832.com-好彩1技巧方法| www.257607.com-非法福彩-| www.838704.com-快三跨一的号有哪些| www.954482.com-博牛彩票怎么提现| www.64vr.com-足彩推荐微信公众号| www.78368.com-彩票王软件-| www.020621.com-彩票平台源码一条龙| www.rp71.com-官方彩是黑网站吗| www.239720.com-红旗彩票快三| www.999233.com-足彩app用户排行| www.lq60.com-彩票新闻-| www.879733.com-如何进入彩票数据库| www.s32.net-福利彩票.com| www.939249.com-大乐透资讯新浪彩票| www.95594.com-开体彩好还是福彩好| www.550792.com-和买福利彩票允许吗| www.381692.com-玩时时彩赚钱心得| www.533750.com-福彩怎么算中奖金额| www.650762.com-鹰彩时时彩骗局| www.785098.com-福利彩票黑幕事件| www.953420.com-彩票一等奖多少钱啊| www.tw99.cc-快开彩票开奖结果| www.560404.com-体彩五星级怎么评定| www.19883.cc-时时彩分析图软件| www.014033.com-七星彩和值尾走势图| www.95281.com-烟台福彩书法| www.33417.com-盛宏彩票首页| www.623549.com-曲昌春讲故事看竞彩| www.771829.com-福利彩票3查询结果| www.766108.com-众购彩票入口导航| www.069744.com-双彩论坛字迷区| www.216503.com-七星彩解梦册查码| www.312999.cc-038彩票注册| www.445454.com-做彩o2o-| www.554010.com-熊猫时时彩软件| www.634813.com-建盏银霜可以养彩| www.775793.com-海盗团队彩票计划| www.893432.com-买彩票输钱失眠| www.07816.com-中彩那天课文及图片| www.652550.com-乐彩客手机app| www.81eu.com-银行积分兑彩票| www.835236.com-印第安红好彩|