开发者

How can I dynamically mark a menu tab for the current URL as active?

开发者 https://www.devze.com 2023-04-06 08:11 出处:网络
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:

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 bas开发者_JAVA百科e_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>


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;
   }
 });
});


var str = 'http://localhost/BandTemplate/admin/galleries';
var substr = str.split('/');
var lastEl = substr .pop();

now lastEl is galleries

0

精彩评论

暂无评论...
验证码 换一张
取 消