如何使用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+ 浏览量

开启你的职业生涯

完成课程获得认证

开始学习
广告