58

使用 twitter 引导程序，我需要将活动类启动到主导航的 li 部分。自动。我们使用 php 而不是 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 上的所有答案，但没有真正的快乐。

我玩过这个：

/*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'); 
        } 
    });
})

但没有喜悦。

4

16 回答 16

130

对于引导程序 3：

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

更新

对于引导程序 4：

var url = window.location;
// Will only work if string in href matches with location
$('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.navbar-nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');
于 2012-10-18T08:48:54.273 回答
37

我们最终设法解决了：

/*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'); 
    } 
  });
});
于 2012-07-18T10:32:57.333 回答
30

你真的不需要任何带有 Bootstrap 的 JavaScript：

 <ul class="nav">
     <li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
     <li><a data-target="#" data-toggle="pill" href="#users">Users</a></li>
 </ul>

要在选择菜单项后执行更多任务，您需要 JS，如此处其他帖子所述。

希望这可以帮助。

于 2013-05-16T20:44:57.880 回答
13

如果你把 

data-toggle="pill"

在标签中它应该自动工作。

http://twitter.github.com/bootstrap/javascript.html#tabs

在标记下阅读

于 2013-02-12T21:02:41.890 回答
10

这为我完成了工作，包括活动的主要下拉菜单和活动的孩子（感谢 422）：

$(document).ready(function () {
    var url = window.location;
    // Will only work if string in href matches with location
    $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
    $('ul.nav a').filter(function () {
        return this.href == url;
    }).parent().addClass('active').parent().parent().addClass('active');
});
于 2013-04-28T17:06:47.147 回答
8

如果您使用带有路由和操作的 MVC 框架：

$(document).ready(function () {
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

正如 Christian Landgren 的回答所示： https ://stackoverflow.com/a/13375529/101662

于 2013-06-26T13:45:29.193 回答
6

试试这个。

// Remove active for all items.
$('.page-sidebar-menu li').removeClass('active');

// highlight submenu item
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active');

// Highlight parent menu item.
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active');
于 2013-12-26T06:57:01.173 回答
3

这对我来说很好。它将简单的导航元素和下拉导航元素标记为活动的。

$(document).ready(function () {
   var url = window.location;

   $('ul.nav a[href="' + this.location.pathname + '"]').parent().addClass('active');

   $('ul.nav a').filter(function() {
      return this.href == url;
   }).parent().parent().parent().addClass('active');
});

传递this.location.pathname给 $('ul.nav a[href="'...'"]')标记也是简单的导航元素。传球url对我不起作用。

于 2014-10-08T11:40:54.367 回答
2

以防万一您在 Angulajs 中使用 Boostrap：这是一个对我有用的简单指令（因为 Kam 引用的数据切换不包含在 Angular-ui 中）。希望能有所帮助。

app.directive("myDataToggle", function(){
    function link(scope, element, attrs) {
        var e = angular.element(element);
        e.on('click', function(){
            e.parent().parent().children().removeClass('active');
            e.parent().addClass("active");
        })
    }
    return {
        restrict: 'A',
        link: link
    };
});

<ul class="nav nav-sidebar">
    <li><a href="#/page1" my-data-toggle>Page1</a></li>
    <li><a href="#/page2" my-data-toggle>Page2</a></li>
    <li><a href="#/page3" my-data-toggle>Page3</a></li>
</ul>
于 2014-09-24T21:30:09.593 回答
1

解决方案很简单，不需要服务器端或ajax，只需要jQuery和Bootstrap。在每个页面上添加一个id标签body。使用它id来查找包含页面名称（标签的值）的标签。

例子：

page1.html

<body id="page1">
    <ul class="nav navbar-nav">
        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page2</a></li>
    </ul>
    <script src="script.js"></script>
</body>

page2.html

<body id="page2">
    <ul class="nav navbar-nav">
        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page2</a></li>
    </ul>
    <script src="script.js"></script>
</body>

脚本.js

<script>
    $(function () {
        $("#page1 a:contains('Page1')").parent().addClass('active');
        $("#page2 a:contains('Page2')").parent().addClass('active');
     });
</script>

非常感谢本！YouTube

于 2015-03-08T19:11:23.923 回答
1

在引导程序 4 的一些罕见情况下，接受的答案存在问题：为了将解决方案用于相对路径，例如：

<ul class="navbar-nav nav-t">
   <li class="nav-item"><a href="index.php" class="nav-link">Home</a></li>
   <li class="nav-item"><a href="about.php" class="nav-link">About</a></li>
   <li class="nav-item"><a href="blog.php" class="nav-link">Blog</a></li>
   <li class="nav-item"><a href="info.php" class="nav-link">Info</a></li>
</ul>

然后你会发现代码：

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

活动页面返回整个 url，当前位置返回当前 href DOM 元素值，即 filename.php。为了解决这个问题，只需通过添加一个方法来纠正这个问题，稍微调整一下代码：

//... other js/jquery code
var activeMenuItemChanges=function () {
    function stripTrailingSlash(str) {
        if(str.substr(-1)=='/'){
            return str.substr(0, str.length -1);
        }
        return str;
    }
    // for cases where we do not use full url but relative file names in the href of ul>li>a tags:
    function getRelativeFileName(str){
        let page=str.substr(str.lastIndexOf('/')+1);
        if(page.length > 0){
            return page;
        }
        return 'index'|'index.php';
    }

    let url=window.location.pathname;

    let activeLocation=stripTrailingSlash(url);

    let activeFileName=getRelativeFileName(activeLocation);

    $('.nav-item a').each(function() {
        let currentLocation=stripTrailingSlash($(this).attr('href'));
        if(activeFileName==currentLocation){
            $(this).parent().addClass('active');
        }
    });
}
activeMenuItemChanges();

//... other js/jquery code
于 2019-09-25T17:36:35.847 回答
0

这是完整的 Twitter 引导示例和基于查询字符串应用的活动类。

要获得正确的解决方案，需要遵循几个步骤：

1) 包括最新的 jquery.js 和 bootstrap.js javascript 文件。

2) 包含最新的 bootstrap.css 文件

3) 包含 querystring-0.9.0.js 用于在 js 中获取查询字符串变量值。

4）HTML：

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="active">
          <a href="#?page=0">
            Home
          </a>
        </li>
        <li>
          <a href="#?page=1">
            Forums
          </a>
        </li>
        <li>
          <a href="#?page=2">
            Blog
          </a>
        </li>
        <li>
          <a href="#?page=3">
            FAQ's
          </a>
        </li>
        <li>
          <a href="#?page=4">
            Item
          </a>
        </li>
        <li>
          <a href="#?page=5">
            Create
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

脚本标签中的 JQuery：

$(function() {
    $(".nav li").click(function() {
        $(".nav li").removeClass('active');
        setTimeout(function() {
            var page = $.QueryString("page");
            $(".nav li:eq(" + page + ")").addClass("active");
        }, 300);

    });
});

我已经完成了完整的 bin，所以请点击这里http://codebins.com/bin/4ldqpaf

于 2012-07-18T07:05:29.483 回答
0

这些都不适合我。我的 Bootstrap 设置导航到单独的页面（因此我无法在单击操作上执行此操作，但在导航到新页面时会删除活动类），并且我的 url 不完全匹配。所以这就是我所做的，基于我基于异常的情况。希望它可以帮助其他人：

//Adding the active class to Twitter bootstrap navs, with a few alternate approaches

$(document).ready(function() {
  var rawhref = window.location.href; //raw current url 
  var newpage = ((window.location.href.match(/([^\/]*)\/?$/)[1]).substring(1)); //take only the last part of the url, and chop off the first char (substring), since the contains method below is case-sensitive. Don't need to do this if they match exactly.
  if (newpage == 'someNonMatchingURL') {  //deal with an exception literally
    newpage = 'matchingNavbarText'
    }
  if (rawhref.indexOf('somePartofURL') != -1) { //look for a consistent part of the path in the raw url to deal with variable urls, etc.
    newpage = "moreMatchingNavbarText"
    }
  $(".nav li a:contains('" + newpage + "')").parent().addClass('active'); //add the active class. Note that the contains method requires the goofy quote syntax to insert a variable.

});
于 2013-01-25T02:28:31.407 回答
0

要激活菜单和子菜单，即使 URL 中有参数，请使用以下代码：

// Highlight the active menu
$(document).ready(function () {
    var action = window.location.pathname.split('/')[1];

    // If there's no action, highlight the first menu item
    if (action == "") {
        $('ul.nav li:first').addClass('active');
    } else {
        // Highlight current menu
        $('ul.nav a[href="/' + action + '"]').parent().addClass('active');

        // Highlight parent menu item
        $('ul.nav a[href="/' + action + '"]').parents('li').addClass('active');
    }
});

这接受如下 URL：

/posts
/posts/1
/posts/1/编辑

于 2015-08-19T15:37:57.950 回答
0

我遇到了同样的问题，这是我在我的应用程序启动脚本中添加的，并且运行顺利。这是javascript

$(document).ready(function($){
  var navs = $('nav > ul.nav');

  // Add class .active to current link
  navs.find('a').each(function(){

    var cUrl = String(window.location).split('?')[0];
    if (cUrl.substr(cUrl.length - 1) === '#') {
      cUrl = cUrl.slice(0,-1);
    }

    if ($($(this))[0].href===cUrl) {
      $(this).addClass('active');

      $(this).parents('ul').add(this).each(function(){
        $(this).parent().addClass('open');
      });
    }
  });
});

对应的 HTML 如下所示。我正在使用CoreUI，这是一个出色的开源管理模板，并且支持许多前端框架，如 Angular、plain bootstrap、Angular 4 等。

<div class="sidebar">
<nav class="sidebar-nav open" >
    <ul class="nav" id="navTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link"    href="/summary"><i class="icon-speedometer"></i> Dashboard </a>
        </li>
        <li class="nav-item">
            <a class="nav-link"    href="/balanceSheet"><i class="icon-chart"></i> Balance Sheet </a>
        </li>
        <li class="divider"></li>
        <li class="nav-title border-bottom">
            <p class="h5 mb-0">
                <i class="icon-graph"></i> Assets
            </p>
        </li>
     </ul>
  </nav>
</div>
于 2017-08-29T10:17:03.407 回答
0 
$(function() {
// Highlight the active nav link.
var url = window.location.pathname;
var filename = url.substr(url.lastIndexOf('/') + 1);
$('.navbar a[href$="' + filename + '"]').parent().addClass("active");

});

更多详情请点击这里！

于 2018-02-27T11:52:06.433 回答