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

问题描述

使用 twitter bootstrap，我需要将活动类启动到主导航的 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屋！