Twitter Bootstrap将活动类添加到li [英] Twitter Bootstrap add active class to li

问题描述

使用twitter引导程序，我需要向主导航的li部分初始化活动类.自动地. 我们使用php而不是ruby.

Using twitter bootstrap, and I need to initiate active class to the li portion of the main nav. Automagically. We use php not ruby.

示例导航:

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/forums">Forums</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/faqs.php">FAQ's</a></li>
    <li><a href="/item.php">Item</a></li>
    <li><a href="/create.php">Create</a></li>
</ul>

引导程序代码如下:

<li class="active"><a href="/">Home</a></li>

因此只需要弄清楚如何将活动类添加到当前页面即可.遍历了Stack上的几乎所有答案，没有真正的喜悦.

So just need to figure out how to append the class active to the current page. Have looked thru nearly every answer on Stack, with no real joy.

我玩过这个游戏

/*menu handler*/
$(function(){
    var url = window.location.pathname;  
    var activePage = url.substring(url.lastIndexOf('/')+1);
    $('.nav li a').each(function(){  
        var currentPage = this.href.substring(this.href.lastIndexOf('/')+1);

        if (activePage == currentPage) {
            $(this).parent().addClass('active'); 
        } 
    });
})

但没有喜悦.

推荐答案

我们最终解决了问题:

/*menu handler*/
$(function(){
  function stripTrailingSlash(str) {
    if(str.substr(-1) == '/') {
      return str.substr(0, str.length - 1);
    }
    return str;
  }

  var url = window.location.pathname;  
  var activePage = stripTrailingSlash(url);

  $('.nav li a').each(function(){  
    var currentPage = stripTrailingSlash($(this).attr('href'));

    if (activePage == currentPage) {
      $(this).parent().addClass('active'); 
    } 
  });
});

这篇关于Twitter Bootstrap将活动类添加到li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！