如何从bootstrap将活动类设置为导航菜单

从Bootstrap将活动类设置为导航菜单的步骤如下：

导航菜单的HTML结构：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">产品</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

在导航菜单中，通过给活动项的li元素添加active类来设置活动类。例如，当前页面为首页，将首页对应的li元素添加active类：

<li class="nav-item active">
  <a class="nav-link" href="#">首页</a>
</li>

可以使用JavaScript动态设置活动类，以适应不同页面的导航高亮。以下是一个基本的JavaScript代码示例：

$(document).ready(function() {
  var url = window.location.href;
  $('.navbar-nav li a').each(function() {
    if (url === (this.href)) {
      $(this).closest('li').addClass('active');
    }
  });
});

以上就是通过Bootstrap将活动类设置为导航菜单的步骤。这样可以在当前页面高亮显示导航菜单项，提升用户体验。

腾讯云相关产品介绍链接地址：