如何使用 Bootstrap 激活导航链接：分步指南

激活 Bootstrap 中的导航链接

复制 Bootstrap 网站上的活动导航功能时，用户可能会在激活菜单项时遇到困难。要解决此问题，请确保正确实现必要的 CSS 和 JavaScript。

HTML

HTML 结构应包含无序列表 (

) ) 和列表项 (
• )，每个列表项包含一个锚标记 ()。锚标记定义导航链接，并且可以选择包含当前活动项目的 aria-current="page" 属性。

  <code class="html"><ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="#contact">Contact</a></li>
  </ul></code>

  CSS

  CSS 定义导航菜单的样式。确保活动类正确应用于当前活动项。

  <code class="css">.menu {
    list-style: none;
  }
  
  .menu > li {
    float: left;
  }
  
  .menu > li > a {
    color: #555;
    float: none;
    padding: 10px 16px 11px;
    display: block;
  }
  
  .menu > li > a:hover {
    color: #F95700;
  }
  
  .menu a[aria-current="page"],
  .menu a[aria-current="page"]:hover {
    color: #F95700;
  }</code>

  JavaScript

  要激活导航链接并切换活动类，请实现 jQuery事件处理程序：

  <code class="javascript">$('.navbar li').click(function(e) {
      $('.navbar li.active').removeClass('active');
      var $this = $(this);
      if (!$this.hasClass('active')) {
          $this.addClass('active');
      }
      e.preventDefault();
  });</code>

以上是如何使用 Bootstrap 激活导航链接：分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！