jQuery制作支付寶商家頁面頂部,寬屏的導(dǎo)航下拉tab菜單切換代碼。這是一款實(shí)用的功能平臺網(wǎng)站導(dǎo)航菜單切換代碼。
使用方法:
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="#">個(gè)人</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="#">產(chǎn)品大全</a>
</li>
<li>
<a href="#">解決方案</a>
<div class="son">
<div class="w1200">
<div class="category">
<dl>
<dd class="selected">
<a href="#">商業(yè)消費(fèi)</a>
</dd>
<dd>
<a href="#">政務(wù)民生</a>
</dd>
<dd>
<a href="#">共享經(jīng)濟(jì)</a>
</dd>
</dl>
</div>
<div class="list active">
<dl>
<dd>
<a href="#">
<span class="title">3C行業(yè)解決方案</span>
<span class="desc">3C數(shù)碼行業(yè)的消費(fèi)信貸解決方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">酒店行業(yè)解決方案</span>
<span class="desc">星級與連鎖酒店支付對賬與會員營銷解決方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">海淘行業(yè)解決方案</span>
<span class="desc">解決進(jìn)口跨境電商行業(yè)中支付單申報(bào)痛點(diǎn)</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">數(shù)字閱讀解決方案</span>
<span class="desc">數(shù)字閱讀行業(yè)支付、營銷等場景的整體解決方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">視頻直播解決方案</span>
<span class="desc">適用長(短)視頻、直播等不同業(yè)態(tài)的解決方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">停車行業(yè)解決方案</span>
<span class="desc">提升停車場管理效率,創(chuàng)新商業(yè)模式</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">旅游景區(qū)解決方案</span>
<span class="desc">為景區(qū)景點(diǎn)訂制的支付與營銷解決方案</span>
</a>
</dd>
</dl>
</div>
<div class="list">
<dl>
<dd>
<a href="#">
<span class="title new">智慧城市解決方案</span>
<span class="desc">推進(jìn)互聯(lián)網(wǎng)+政務(wù)創(chuàng)新升級</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title new">醫(yī)療行業(yè)解決方案</span>
<span class="desc">幫助醫(yī)患雙向減負(fù),看病就醫(yī)更簡單</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title new">物業(yè)行業(yè)解決方案</span>
<span class="desc">提升物業(yè)管理效率與服務(wù)體驗(yàn)</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">運(yùn)營商行業(yè)解決方案</span>
<span class="desc">運(yùn)營商線上服務(wù)渠道方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">物流行業(yè)解決方案</span>
<span class="desc">物流行業(yè)的資金管理解決方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">客運(yùn)行業(yè)解決方案</span>
<span class="desc">客運(yùn)行業(yè)掃碼付款、電子票解決方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">中小學(xué)、幼兒園繳費(fèi)解決方案</span>
<span class="desc">解決中小學(xué)、幼兒園繳費(fèi)問題</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title new">公交乘車碼解決方案</span>
<span class="desc">助力公共交通機(jī)構(gòu)的互聯(lián)網(wǎng)化轉(zhuǎn)型</span>
</a>
</dd>
</dl>
</div>
<div class="list">
<dl>
<dd>
<a href="#">
<span class="title new">無人值守場景解決方案</span>
<span class="desc">為場館、園區(qū)提供人員核身、服務(wù)結(jié)算的解決方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title">共享單車解決方案</span>
<span class="desc">共享單車收付款與信用免押金服務(wù)解決方案</span>
</a>
</dd>
<dd>
<a href="#">
<span class="title new">共享充電解決方案</span>
<span class="desc">為商家提供的自助充電設(shè)備解決方案</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>