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天

知道了
58福彩 www.234566.com-3d字谜牛彩网| www.761266.com-南粵风彩好彩3| www.868559.com-本期七星彩图规| www.945228.com-福建福彩投注站电话| www.cp0728.com-原快三助手-| 世彩堂www.5854z.cc| www.16816.cc-彩宝贝诸葛小芸专栏| www.72491.com-优彩网手机版本下载| www.611382.com-网吧怎么玩彩虹六号| www.698097.com-浙江台州体彩中心| www.791145.com-福彩3d手机选号器| www.874133.com-福彩第二版-| www.965676.com-玩赚彩票app下载| www.jj9.com-北京快三开奖网站| www.sh04.com-乐8网彩票-| www.823389.com-彩铝用途-| www.900778.com-彩吧p3图谜第三版| www.968601.com-香港为什么都买彩金| 500彩票网www.919709.com| www.mz94.com-彩83app下载| www.500079.cc-有分分时时彩的软件| www.037575.com-内蒙古福彩网首页| www.137864.com-七星彩开结果奖时间| www.766115.com-九号彩票手机客户端| www.985042.com-竞彩如何找客户| www.xc65.com-旧版彩经网走势图| www.235861.com-网易快三是骗局揭秘| www.336045.com-天津体彩11选五组| www.456162.com-博彩手机验证送彩金| www.658692.com-双彩网官方论坛| www.772616.com-618彩票下载| www.738796.com-金丽彩票-| www.064846.com-亚洲彩票是否合法| www.5894.org-体彩奖如何领取| www.61986.cc-大奖五分快三计划| www.518319.com-下载乐彩-| www.242598.com-168j彩票-| www.507419.com-3355购彩cc-| www.643311.com-幸福彩票官方网站| www.911.gg-生命没有彩排| 万彩网www.wcp666888.com| www.6880.tv-看彩票开奖大乐透| www.157718.com-黑龙江福彩领奖地址| www.288986.com-彩神苹果版下载网址| www.435692.com-在彩票站工作怎么样| www.597032.com-吉林快三形势走势图| www.m12.org-盈彩在线大发快3| www.73xt.com-3b牛彩网图谜总汇| www.282988.com-湖北快三和值奖金| www.387501.com-彩10000下载| www.507327.com-c29彩票官方网| www.572787.com-一分快三豹子计划| www.206643.com-体育彩票平台app| www.079304.com-快三末班车-| www.ot50.com-彩票335-| www.20qx.com-体彩2月16日开奖| www.022697.com-重庆时彩投注软件| www.024963.com-近5期七星彩中奖号| www.897632.com-多彩贵州网待遇| www.971743.com-上海体彩最新app| www.ld59.com-中彩彩票可靠吗| www.37nm.com-新浪爱彩怎么买| www.106510.com-福利彩票3月21号| www.178191.com-手机网上买彩票| www.173420.com-福彩快三是真的吗| www.556009.com-乐彩任选六怎么玩| www.652482.com-双色球彩票站开奖| www.cp0417.com-福彩河北快三走势图| www.zz08.com-22彩票注册网址| www.62by.com-彩票100期-| www.260032.com-买体育彩票算赌博吗| www.572017.com-足彩预测258| www.14043.com-全国赌竞彩的人| www.709162.com-腾讯分分彩输了贴吧| www.938796.com-红牛彩票一分快三| E彩堂www.43818.cc| www.959160.com-春天彩票-| 幸运众彩www.108095.com| www.69585.cc-彩民彩票撤销订单| www.111693.com-赠彩金的app| www.60hj.com-双色球购彩大厅机选| www.847.pw-乐游彩票正规吗| www.426258.com-中国足彩在线官网| www.092689.com-福建官网体彩| www.ni6.cc-网易彩票手机版| www.ro70.com-十分钟开一次彩票| www.40cs.com-七星彩300期| www.if00.com-福彩中心开机号| www.783163.com-体彩投票站如何申请| www.cai3924.com甘肃体彩十一选5| www.280033.com-福彩15选五-| www.552096.com-利博彩票软件下载| www.644603.com-万彩宝-| www.729279.com-北京pk赛车彩票| www.176909.com-幸运快三是什么彩票| www.602498.com-彩票双色球精准杀号| www.247339.com-上海福彩网官网下载| 彩乐乐www.cll168.com| www.899391.com-福彩体彩开奖结果| www.981474.com-易彩我-| www.rh.com-河北快三走势图遗漏| www.232693.com-福利彩票快3走势图| www.85155.cc-乐彩网是正规平台吗| www.520386.com-体彩预测app| www.669656.com-彩票工具之今日运势| www.754655.com-时时彩倍投公式算法| www.170266.cc-3d彩票中奖号码| www.810217.com-彩票怎么才算中奖| www.890856.com-湖北今日快三走势图| www.9504.cc-大数定律下的彩票| www.77041.com-彩票分析软件安卓| www.087123.com-中福彩票分析软件| www.158706.com-体彩走势图彩宝网| www.234021.com-送彩金彩票平台| www.02224.cc-搜狗彩票彩种| www.019203.com-彩票行家全年资料| www.116130.com-彩虹颜色的顺序| www.22xu.com-三分时时彩中大奖| www.293.tv-七星彩在哪儿买| www.966109.com-即开型彩票中奖规律| www.106850.com-博大彩票软件平台| www.493002.com-幸运彩票送18| www.218768.com-360彩票网-| www.161678.com-彩乐汇安全吗| www.bu05.com-一分快3彩票和值| www.wz84.cc-七星彩头尾论坛| www.yr67.com-体育彩票直选3| www.308085.com-白银福利彩票站| www.438255.com-2016欧洲杯彩票| www.2324.biz-二分彩专业计划| www.605252.com-网上骗买彩票行为| www.227449.com-时时彩最准平投方法| www.387344.com-彩贴是什么-| www.595543.com-鑫亿彩app骗局| www.223032.com-旺旺彩票下载手机版| www.368046.com-七星彩书版番外| www.539958.com-彩娃app3.5-| www.cai9155.com彩票开奖查洵| www.573693.com-时时彩定位杀号技巧| www.60tg.com-刷网易购彩是真的吗| www.910478.com-篮彩分析-| www.497722.com-福牛网彩票下载软件| www.034410.com-nba篮彩推荐微博| www.787825.com-胜负彩19054| www.490051.com-福满天体彩店软件| www.353286.com-京彩挂机能赚钱吗| www.586323.com-最新白菜免费彩金| www.976678.com-四川彩礼20万多吗| www.74ar.com-彩店宝苹果-| www.36009.cc-官方渠道买彩票| www.219629.com-双彩图-| www.495.mobi-重庆时时彩资料群| www.920208.com-彩gg-| www.731928.com-欧冠足彩-| www.3xx.cc-足彩对阵身价| www.806508.com-竞彩跟单资金计划| www.947656.com-福彩格式-| 500万彩票www.5441j.com| www.31832.cc-金誉彩票网vip3| www.92462.com-188彩票官网| www.299386.com-豪彩手机客户端下载| www.484118.com-8848彩票大厅| www.122949.com-盈彩计划团队| www.87306.com-彩票五星乐彩|