[JavaScript 實(shí)例] 導(dǎo)航欄幾種常見(jiàn)樣式

這里記錄下導(dǎo)航欄幾種常見(jiàn)的樣式，僅供大家參考。

導(dǎo)航欄1 （原生 JS 代碼）

比較常見(jiàn)也比較簡(jiǎn)單的導(dǎo)航欄 ，用的 JavaScript 原生代碼，大致思路是通過(guò)改變 li 元素的 className 實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換 tab 時(shí)改變其背景色及文字顏色，同時(shí)切換顯示 tab 對(duì)應(yīng)內(nèi)容。

nav-1.gif
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" charset="text/html;charset=utf-8" />
    <title>導(dǎo)航欄1-JS原生版</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font: 12px/2 "Courier New";
      }
      #header {
        width: 550px;
        height: 200px;
        margin: 20px auto;
        border: 1px solid #e1e1e1;
      }
      #nav {
        list-style-type: none;
      }
      #nav li {
        width: 110px;
        height: 35px;
        background: #fff;
        float: left;
        color: #000;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
        border-bottom: 1px solid #e1e1e1;
        font-weight: bold;
      }
      #nav li.active {
        background: #11ac63;
        color: #fff;
      }
      #content {
        padding: 50px 30px;
      }
      #content ul {
        display: none;
      }
      #content .list {
        display: block;
      }
    </style>
    <script>
      window.onload = function() {
        var aLi = document.getElementById("nav").getElementsByTagName("li");
        var oUl = document.getElementById("content").getElementsByTagName("ul");
        var i = 0;
        for (i = 0; i < aLi.length; i++) {
          aLi[i].index = i;
          aLi[i].onmouseover = function() {
            for (var x in aLi) {
              aLi[x].className = "";
              oUl[x].className = "";
            }
            this.className = "active";
            oUl[this.index].className = "list";
          };
          aLi[i].onmouseout = function() {
            this.className = "";
            aLi[this.index].className = "active";
          };
        }
      };
    </script>
  </head>
  <body>
    <div id="header">
      <ul id="nav">
        <li class="active">華為</li>
        <li>蘋果</li>
        <li>小米</li>
        <li>三星</li>
        <li>一加</li>
      </ul>
      <div id="content">
        <ul class="list">
          <li>華為 Mate20</li>
          <li>華為 P20</li>
          <li>華為榮耀 10</li>
        </ul>
        <ul>
          <li>iPhone XS</li>
          <li>iPhone XS MAX</li>
          <li>iPhone 8</li>
        </ul>
        <ul>
          <li>小米 8</li>
          <li>小米 8 SE</li>
          <li>小米 Play</li>
        </ul>
        <ul>
          <li>三星 Note 9</li>
          <li>三星 S9 +</li>
          <li>三星 A8s</li>
        </ul>
        <ul>
          <li>一加手機(jī) 6</li>
          <li>一加手機(jī) 6T</li>
          <li>一加手機(jī) 5T</li>
        </ul>
      </div>
    </div>
  </body>
</html>

導(dǎo)航欄1（jQuery 代碼）

還是第一種導(dǎo)航欄樣式，通過(guò) jQuery 實(shí)現(xiàn)，思路不變。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" charset="text/html;charset=utf-8" />
    <title>導(dǎo)航欄2</title>
    <script src="../../scripts/lib/jquery-3.3.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font: 12px/2 "Courier New";
      }
      #header {
        width: 550px;
        height: 200px;
        margin: 20px auto;
        border: 1px solid #e1e1e1;
      }
      #nav {
        list-style-type: none;
      }
      #nav li {
        width: 110px;
        height: 35px;
        background: #fff;
        float: left;
        color: #000;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
        border-bottom: 1px solid #e1e1e1;
        font-weight: bold;
        transition: 0.5s;
      }
      #nav li.active {
        background: #fff;
        color: #11ac63;
      }
      #content {
        padding: 50px 30px;
      }
      #content ul {
        display: none;
      }
      #content .list {
        display: block;
      }
    </style>
    <script>
      $(function() {
        $("#nav li").each(function(index) {
          $(this).mouseover(function() {
            $("#nav .active").removeClass("active");
            $("#content .list").removeClass("list");
            $(this).addClass("active");
            $("#content ul:eq(" + index + ")").addClass("list");
          });
        });
      });
    </script>
  </head>
  <body>
    <div id="header">
      <ul id="nav">
        <li class="active">華為</li>
        <li>蘋果</li>
        <li>小米</li>
        <li>三星</li>
        <li>一加</li>
      </ul>
      <div id="content">
        <ul class="list">
          <li>華為 Mate20</li>
          <li>華為 P20</li>
          <li>華為榮耀 10</li>
        </ul>
        <ul>
          <li>iPhone XS</li>
          <li>iPhone XS MAX</li>
          <li>iPhone 8</li>
        </ul>
        <ul>
          <li>小米 8</li>
          <li>小米 8 SE</li>
          <li>小米 Play</li>
        </ul>
        <ul>
          <li>三星 Note 9</li>
          <li>三星 S9 +</li>
          <li>三星 A8s</li>
        </ul>
        <ul>
          <li>一加手機(jī) 6</li>
          <li>一加手機(jī) 6T</li>
          <li>一加手機(jī) 5T</li>
        </ul>
      </div>
    </div>
  </body>
</html>

導(dǎo)航欄2

使用 jQuery 代碼，思路與第一種一樣，通過(guò)改變 li 元素的 className 實(shí)現(xiàn)，只是不改變 tab 的背景色而只改變字體顏色，也是比較常見(jiàn)的導(dǎo)航欄樣式之一。為了更好的顯示效果，順便給切換標(biāo)簽時(shí)字體顏色的改變加了漸變效果。

nav-2.gif
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" charset="text/html;charset=utf-8" />
    <title>導(dǎo)航欄2</title>
    <script src="../../scripts/lib/jquery-3.3.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font: 12px/2 "Courier New";
      }
      #header {
        width: 550px;
        height: 200px;
        margin: 20px auto;
        border: 1px solid #e1e1e1;
      }
      #nav {
        list-style-type: none;
      }
      #nav li {
        width: 110px;
        height: 35px;
        background: #fff;
        float: left;
        color: #000;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
        border-bottom: 1px solid #e1e1e1;
        font-weight: bold;
        transition: 0.5s;
      }
      #nav li.active {
        color: #11ac63;
      }
      #content {
        padding: 50px 30px;
      }
      #content ul {
        display: none;
      }
      #content .list {
        display: block;
      }
    </style>
    <script>
      $(function() {
        $("#nav li").each(function(index) {
          $(this).mouseover(function() {
            $("#nav .active").removeClass("active");
            $("#content .list").removeClass("list");
            $(this).addClass("active");
            $("#content ul:eq(" + index + ")").addClass("list");
          });
        });
      });
    </script>
  </head>
  <body>
    <div id="header">
      <ul id="nav">
        <li class="active">華為</li>
        <li>蘋果</li>
        <li>小米</li>
        <li>三星</li>
        <li>一加</li>
      </ul>
      <div id="content">
        <ul class="list">
          <li>華為 Mate20</li>
          <li>華為 P20</li>
          <li>華為榮耀 10</li>
        </ul>
        <ul>
          <li>iPhone XS</li>
          <li>iPhone XS MAX</li>
          <li>iPhone 8</li>
        </ul>
        <ul>
          <li>小米 8</li>
          <li>小米 8 SE</li>
          <li>小米 Play</li>
        </ul>
        <ul>
          <li>三星 Note 9</li>
          <li>三星 S9 +</li>
          <li>三星 A8s</li>
        </ul>
        <ul>
          <li>一加手機(jī) 6</li>
          <li>一加手機(jī) 6T</li>
          <li>一加手機(jī) 5T</li>
        </ul>
      </div>
    </div>
  </body>
</html>

導(dǎo)航欄3

使用 jQuery 代碼，鼠標(biāo)移動(dòng)切換標(biāo)簽時(shí) tab 背景色會(huì)通過(guò)滑動(dòng)的方式切換至目標(biāo)位置。實(shí)現(xiàn)思路是在之前導(dǎo)航欄樣式基礎(chǔ)上多加了個(gè) li 標(biāo)簽，指定該 li 元素的定位類型為 absolute，同時(shí)還需設(shè)置其父元素為 relative 定位。然后在 JS 代碼中修改上述 li 標(biāo)簽的 left 屬性值，并且指定其文本內(nèi)容（可獲取當(dāng)前 tab 的文本內(nèi)容）。當(dāng)然，最重要的是給該 li 標(biāo)簽添加過(guò)渡屬性，否則 tab 切換就沒(méi)有滑動(dòng)效果了。

nav-3.gif
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" charset="text/html;charset=utf-8" />
    <title>導(dǎo)航欄3</title>
    <script src="../../scripts/lib/jquery-3.3.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font: 12px/2 "Courier New";
      }
      #header {
        width: 550px;
        height: 200px;
        margin: 20px auto;
        border: 1px solid #e1e1e1;
      }
      #nav {
        list-style-type: none;
        position: relative;
      }
      #nav li {
        width: 110px;
        height: 35px;
        background: #fff;
        float: left;
        color: #000;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
        border-bottom: 1px solid #e1e1e1;
        font-weight: bold;
      }
      #nav li.active {
        position: absolute;
        background: #11ac63;
        color: #fff;
        left: 0;
        transition: 0.5s;
      }
      #content {
        padding: 50px 30px;
      }
      #content ul {
        display: none;
      }
      #content .list {
        display: block;
      }
    </style>
    <script>
      $(function() {
        $(".tab").hover(function() {
          var index = $(".tab").index(this);
          $(".active").css("left", 110 * index + "px");
          setTimeout(function() {
            $(".active").html($(".tab:eq(" + index + ")").html());
          }, 250);
          $("#content .list").removeClass("list");
          $("#content ul:eq(" + index + ")").addClass("list");
        });
      });
    </script>
  </head>
  <body>
    <div id="header">
      <ul id="nav">
        <li class="active">華為</li>
        <li class="tab">華為</li>
        <li class="tab">蘋果</li>
        <li class="tab">小米</li>
        <li class="tab">三星</li>
        <li class="tab">一加</li>
      </ul>
      <div id="content">
        <ul class="list">
          <li>華為 Mate20</li>
          <li>華為 P20</li>
          <li>華為榮耀 10</li>
        </ul>
        <ul>
          <li>iPhone XS</li>
          <li>iPhone XS MAX</li>
          <li>iPhone 8</li>
        </ul>
        <ul>
          <li>小米 8</li>
          <li>小米 8 SE</li>
          <li>小米 Play</li>
        </ul>
        <ul>
          <li>三星 Note 9</li>
          <li>三星 S9 +</li>
          <li>三星 A8s</li>
        </ul>
        <ul>
          <li>一加手機(jī) 6</li>
          <li>一加手機(jī) 6T</li>
          <li>一加手機(jī) 5T</li>
        </ul>
      </div>
    </div>
  </body>
</html>

導(dǎo)航欄4

使用 jQuery 代碼，與上一種導(dǎo)航欄樣式實(shí)現(xiàn)思路大致相同，只是把新添加的 li 更換為 div，同樣設(shè)置好該 div 及其父元素的定位類型，并根據(jù) tab 的高度自行調(diào)整 div 的高度及 top 屬性值。除了該 div 無(wú)需設(shè)置文本內(nèi)容外，還加入了 tab 切換時(shí)改變字體顏色，其他部分則上一種樣式基本一致。

nav-4.gif
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" charset="text/html;charset=utf-8" />
    <title>導(dǎo)航欄4</title>
    <script src="../../scripts/lib/jquery-3.3.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font: 12px/2 "Courier New";
      }
      #header {
        width: 550px;
        height: 200px;
        margin: 20px auto;
        border: 1px solid #e1e1e1;
      }
      #nav {
        list-style-type: none;
        position: relative;
      }
      #nav li {
        width: 110px;
        height: 35px;
        background: #fff;
        float: left;
        color: #000;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
        border-bottom: 1px solid #e1e1e1;
        font-weight: bold;
      }
      #nav .active {
        position: absolute;
        background: #11ac63;
        color: #fff;
        top: 32px;
        left: 0;
        transition: 0.5s;
        width: 110px;
        height: 3px;
        text-align: center;
      }
      #content {
        padding: 50px 30px;
      }
      #content ul {
        display: none;
      }
      #content .list {
        display: block;
      }
      #nav .tab {
        color: #11ac63;
        transition: 0.5s;
      }
    </style>
    <script>
      $(function() {
        $("#nav li").hover(function() {
          var index = $("#nav li").index(this);
          $(".active").css("left", 110 * index + "px");
          $("#nav .tab").removeClass("tab");
          $(this).addClass("tab");
          $("#content .list").removeClass("list");
          $("#content ul:eq(" + index + ")").addClass("list");
        });
      });
    </script>
  </head>
  <body>
    <div id="header">
      <ul id="nav">
        <div class="active"></div>
        <li class="tab">華為</li>
        <li>蘋果</li>
        <li>小米</li>
        <li>三星</li>
        <li>一加</li>
      </ul>
      <div id="content">
        <ul class="list">
          <li>華為 Mate20</li>
          <li>華為 P20</li>
          <li>華為榮耀 10</li>
        </ul>
        <ul>
          <li>iPhone XS</li>
          <li>iPhone XS MAX</li>
          <li>iPhone 8</li>
        </ul>
        <ul>
          <li>小米 8</li>
          <li>小米 8 SE</li>
          <li>小米 Play</li>
        </ul>
        <ul>
          <li>三星 Note 9</li>
          <li>三星 S9 +</li>
          <li>三星 A8s</li>
        </ul>
        <ul>
          <li>一加手機(jī) 6</li>
          <li>一加手機(jī) 6T</li>
          <li>一加手機(jī) 5T</li>
        </ul>
      </div>
    </div>
  </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,887評(píng)論 1贊 45
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,204評(píng)論 1贊 92
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,451評(píng)論 2贊 66
  • 悅子wz閱讀 229評(píng)論 0贊 0
  • 我想 跟你借一秒的時(shí)間 輕輕回望你我的從前 在那段泛黃的歲月 有我最痛的懷念 我愿 跟你借春季的一天 走過(guò)漫山遍野...
    雨天吖閱讀 327評(píng)論 2贊 3

友情鏈接更多精彩內(nèi)容