如何使用HTML、CSS和JavaScript使导航菜单中的活动标签弯曲

想要实现导航菜单中的活动标签弯曲，在HTML、CSS和JavaScript的配合下可以完成，接下来我会为你提供详细的攻略。

HTML 结构

首先，在 HTML 结构中需要添加一个导航菜单列表，在其中添加了每个菜单项用于导航的锚点链接。对于每个菜单项，需要用一个 li 元素包裹。例如：

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

CSS 样式

在 CSS 样式中，需要设置样式用于弯曲活动标签，在另一个样式中设置样式用于改变激活状态的标签，使其弯曲。

设置弯曲标签的样式

nav ul li a.active {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}

nav ul li a.active:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 90%;
  margin-left: -45%;
  height: 5px;
  border-radius: 10px 10px 0 0;
  background-color: #0071bf;
}

此处，我们添加了一个 :after 伪元素，这个伪元素具体用来模拟出拥有菱形弧度的下边框，通过设置 border-radius 属性，实现菱形的效果。

设置激活状态标签的样式

添加一个class名称为 .active，将作为激活状态标签的样式，在实现 JavaScript 功能时，我们需要在激活状态时为当前的标签添加这个 class 名称。

nav ul li a.active {
  color: #000;
  font-weight: 700;
}

JavaScript 功能

最后，在 JavaScript 中添加功能，检测用户当前所在的页面，以及当前页面对应哪个导航菜单的标签。在完成检测后，为当前标签添加 .active class 来应用 CSS 样式中的效果。

以下提供两种 JavaScript 实现的方法。

方法一：使用jQuery

使用 jQuery 的 scroll() 方法和 each() 方法，来匹配当前页面所对应的导航菜单标签。

$(document).ready(function() {
  $(window).scroll(function() {
    var position = $(this).scrollTop();
    $('section').each(function() {
      var target = $(this).offset().top;
      var id = $(this).attr('id');
      var nav_height = $('.navbar').outerHeight();
      if (position >= target - nav_height && position < target + $(this).height() - nav_height) {
        $('nav ul li a').removeClass('active');
        $('nav ul li a[href="#' + id + '"]').addClass('active');
      }
    });
  });
});

方法二：使用纯JavaScript

使用纯 JavaScript，获取当前页面所在的位置，以及每个导航菜单标签的位置，之后进行比较并设置 active 类型使标签使用弯曲效果。

var navbarLinks = document.querySelectorAll('.navbar a');
var sections = document.querySelectorAll('section');

function changeLinkState() {
  let index = sections.length;
  while(--index && window.scrollY + 50 < sections[index].offsetTop) {}
  navbarLinks.forEach((link) => link.classList.remove('active'));
  navbarLinks[index].classList.add('active');
}

changeLinkState();
window.addEventListener('scroll', changeLinkState);

上述纯 JavaScript 方法加入了 addEventListener 方法，并使用 scroll 事件来监听页面滚动事件，在页面滚动时调用 changeLinkState，动态对导航菜单进行修改。

这两种实现方法都可以实现在导航菜单中弯曲激活标签的效果。