How to Make Navigation Links Active Using Bootstrap: A Step-by-Step Guide

Activating Navigation Links in Bootstrap

When replicating the active navigation feature seen on the Bootstrap website, users may encounter difficulties in activating menu items. To address this issue, ensure that the necessary CSS and JavaScript are implemented correctly.

HTML

The HTML structure should include an unordered list (

) with list items (
• ), each containing an anchor tag (). The anchor tag defines the navigation link and can optionally include an aria-current="page" attribute for the current active item.

  <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

  The CSS defines styles for the navigation menu. Ensure that the active class is properly applied to the current active item.

  <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

  To activate navigation links and toggle the active class, implement jQuery event handlers:

  <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>

  The above is the detailed content of How to Make Navigation Links Active Using Bootstrap: A Step-by-Step Guide. For more information, please follow other related articles on the PHP Chinese website!