How to Make Navigation Links Active Using Bootstrap: A Step-by-Step Guide-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-10-28 04:07:32

Original

569 people have browsed it

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 (

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

Copy after login

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>

Copy after login

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>

Copy after login

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!