Bootstrap CSS Active Navigation

Question

On the Bootstrap website the subnav matches up with the sections and changes background color as you or scroll to the section. I wanted to create my own menu without all the

Answer 1

<ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>

Answer 2

I did something different to solve this (fyi, i'm a complete html/css/js amateur).

Each of my navbar buttons goes to a new page. so, in each page's html, i put something like this at the bottom:

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

That got it working right away for me.

P.S. I tried the accepted answer but had no luck as it would also need to remove the 'active' class from the currently active button to truly 'switch' over. I'm sure it's possible, but again, I'm pretty new to this stuff.

Answer 3

this is my code for handling twitter bootstrap navigation list:

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });

Answer 4

anyone having problems with this using jsp, watch your packages.

document.location.pathname gave me: /packagename/index.jsp

but my href in my navbar called just index.jsp

So to edit konsumer's answer:

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );

Answer 5

This is getting pretty old and clustered with answers, but I took the top answer and made it better. The top answer only works if there's one on the page. This scopes it to removing active from sibling elements and adding it to the one you clicked.

I also added the class nav-toggle so that it doesn't interfere with things that already have bootstrap js attached.

$('.nav.nav-toggle li').click(function(e) {
  var $this = $(this);
  $this.siblings().removeClass('active');
  if (!$this.hasClass('active')) {
      $this.addClass('active');
  }
  e.preventDefault();
});

Answer 6

I suggest this code :

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

It's work like a charm .