如何使用HTML、CSS和JavaScript建立導航選單中的活動選項卡？

藉助HTML、CSS和JavaScript，可以建立一個帶有曲線活動選項卡的導航選單。這可以透過使用::before和::after偽元素來建立所需的形狀，然後使用JavaScript向元素新增活動類來實現。

HTML

此導航選單的HTML非常簡單。它包含一個具有“nav”類的ul元素，其中包含六個li元素，每個元素都具有“nav-item”類。

<ul class="nav">
   <li class="nav-item"><a href="#">Home</a></li>
   <li class="nav-item"><a href="#">About</a></li>
   <li class="nav-item"><a href="#">Services</a></li>
   <li class="nav-item"><a href="#">Portfolio</a></li>
   <li class="nav-item"><a href="#">Contact</a></li>
</ul>

CSS

此導航選單的CSS非常簡單。::before和::after偽元素用於建立活動選項卡的兩半。然後將它們絕對定位，以便它們位於其他選項卡的頂部。

.nav-item類用於設定導航選單的其餘樣式。a元素被設定為塊級顯示，以便它們填充li元素的整個空間。

.nav {
   position: relative;
   list-style: none;
   padding: 0;
   margin: 0;
}
.nav::before, .nav::after {
   content: "";
   position: absolute;
   top: 0;
   width: 50%;
   height: 100%;
   background: #fff;
   z-index: 1;
}
.nav::before {
   left: 0;
   border-radius: 0 0 0 50%;
}
.nav::after {
   right: 0;
   border-radius: 0 0 50% 0;
}
.nav-item {
   position: relative;
   float: left;
   width: 16.66667%; 
}
.nav-item a {
   display: block;
   padding: 10px 20px;
   border: 1px solid #ccc;
   text-decoration: none;
   color: #333;
   position: relative;
   z-index: 2; 
}

JavaScript

此導航選單的JavaScript非常簡單。它只需要在單擊元素時向其新增活動類。這可以使用classList屬性來完成。

var navItems = document.querySelectorAll(".nav-item");
for (var i = 0; i < navItems.length; i++) {
   navItems[i].addEventListener("click", function() {
      this.classList.add("active");
   });
}

示例

以下是建立導航選單中活動選項卡的完整工作程式。我們使用上面討論的HTML、CSS和JavaScript來實現此目標。

<!DOCTYPE HTML>
<html>
<head>
   <style>HTML
   .nav {
      position: relative;
      list-style: none;
      padding: 0;
      margin: 0;
   }
   .nav::before{
      content: "";
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background: #fff;
      z-index: 1; 
   }
   .active{
      background: rgb(177, 177, 177);
   }
   .nav::after {
      content: "";
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background: rgb(0, 0, 0);
      z-index: 1; 
   }
   .nav::before {
      left: 0;
      border-radius: 0 0 0 50%;
   }
   .nav::after {
      right: 0;
      border-radius: 0 0 50% 0;
   }
   .nav-item {
      position: relative;
      float: left;
      width: 16.66667%;
   }
   .nav-item a {
      display: block;
      padding: 10px 20px;
      border: 1px solid #ccc;
      text-decoration: none;
      color: #333;
      position: relative;
      z-index: 2;
   }
   </style>
</head>
<body>
   <ul class="nav">
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">About</a></li>
      <li class="nav-item"><a href="#">Services</a></li>
      <li class="nav-item"><a href="#">Portfolio</a></li>
      <li class="nav-item"><a href="#">Contact</a></li>
   </ul>
   <script>
      var navItems = document.querySelectorAll(".nav-item");
      for (var i = 0; i < navItems.length; i++) {
         navItems[i].addEventListener("click", function() {
            this.classList.add("active");
         });
      }
   </script>
</body>
</html>

總之，可以使用HTML、CSS和JavaScript建立帶有曲線活動選項卡的導航選單。這可以透過使用::before和::after偽元素來建立所需的形狀，然後使用JavaScript向元素新增活動類來實現。

更新於：2022年8月4日

13K+ 瀏覽量

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.