Question

I have link like this:

http://localhost/BandTemplate/admin/galleries

How can I get to the last segment (galleries) with jquery so that I can change menu tab to active. This is code for the menu:

  <nav id="navigation" class="col_12">
<ul>
    <li><a href="<?php echo base_url() ?>admin">Home</a></li>
    <li><a href="<?php echo base_url() ?>admin/band">Band</a></li>
    <li><a href="<?php echo base_url() ?>admin/news">News</a></li>
    <li><a href="<?php echo base_url() ?>admin/discography">Discography</a></li>
    <li><a href="<?php echo base_url() ?>admin/tour">Tour</a></li>
    <li><a href="<?php echo base_url() ?>admin/galleries">Galleries</a></li>
    <li><a href="<?php echo base_url() ?>admin/social">Social Networks</a></li>
    <li><a href="<?php echo base_url() ?>admin/messages">Messages</a></li>
    <li><a href="<?php echo base_url() ?>admin/logout">Logout</a></li>
</ul>

Answer 1

A more elegant solution would be to traverse the UL list and check if A href attribute has the same URI value as the current page, if yes, add class “active” to LI elem and break the loop.

$(function() {
 $('#navigation ul').children().each(function() {
   var link = $(this).find('a');
   if ($(link).attr('href') == location.href) {
     $(link).addClass('active');
     return false;
   }
 });
});