Skip to content

Instantly share code, notes, and snippets.

@daverogers
Created April 12, 2013 22:41
Show Gist options
  • Save daverogers/5375778 to your computer and use it in GitHub Desktop.
Save daverogers/5375778 to your computer and use it in GitHub Desktop.
Assign "active" class to navbar item based on current page URL with jQuery
<!-- your average Bootstrap navbar component, in this case placed in an include called header.html -->
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about.php">About</a></li>
<li><a href="/contact.php">Contact</a></li>
</ul>
</div>
</div>
@Firestorm-Graphics
Copy link

use this for children:

$('ul li a').click(function(){ $('li a').removeClass("active"); $(this).addClass("active"); });

@beicnet
Copy link

beicnet commented Nov 22, 2017

So, @Firestorm-Graphics is it possible to do the same thing with my code too or?

<nav class='navbar navbar-default'>
   <ul class='nav navbar-nav'>
      <li class='active'><a href='.' target='_self'>Home</a></li>
      <li><a href='network' target='_self'>Network</a></li>
      <li><a href='hardware' target='_self'>Hardware</a></li>
      <li><a href='help' target='_self'>Help</a></li>
   </ul>
</nav>

Thank you!

@higginni
Copy link

Does the file extension have to be present? I am trying to do it with a custom navbar in wordpress..

@robin3317
Copy link

@johnef
Copy link

johnef commented Feb 8, 2018

What about adding the active to

  • I think this will add it to tag

  • @ericauv
    Copy link

    ericauv commented Feb 19, 2018

    I can't find any information on what the "+" in
    $('.nav > li > a[href="'+pathname+'"]').parent().addClass('active');
    do... can you please explain

    @Chochita
    Copy link

    Chochita commented May 9, 2018

    @ericauv I think because it's a variable, you should use a +

    @ncarandini
    Copy link

    @ericauv the + here works as a text concatenation operator:

    mytext = '.nav > li > a[href="' + pathname + '"]'

    Please note the trick of using single quote for string that contains a double quote.

    So, at the end of the day, if the variable pathname as a value of www.mysite.com then

    mytext = .nav > li > a[href="www.mysite.com"]

    @ankitribadia
    Copy link

    Thanks for the help

    @SabineAvalisto
    Copy link

    Thank you very much! it's works

    @xpuig
    Copy link

    xpuig commented Apr 27, 2020

    Thx! Simple and effective 👍

    @seasonC
    Copy link

    seasonC commented May 18, 2020

    Works like a charm. Thanks man.

    Copy link

    ghost commented May 20, 2020

    I have been looking for something like this FOR DAYS!! thank you from a rookie!

    @destinyd081
    Copy link

    Good job...please how do I make each page of this code active
    `



      <?php

                  $query = "select* from main_menus";
                  $result = mysqli_query($con,$query);
      
                  while($row = mysqli_fetch_assoc($result)) {
                      $main_menus_id = $row['menu_id'];
                      $menu_title = $row['menu_title'];
                      $menu_url = $row['menu_url'];
                ?>
              <li class="nav-item ">
                <a href="<?php echo $menu_url ?>"><?php echo $menu_title ?></a>
              </li>
              <?php 
            }
            ?>
            </ul>
          </div>`
      

    @earlpearl17
    Copy link

    Thank you sir.

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment