Twitter Bootstrap 向 li 添加活动类

Posted 2023-02-21

技术标签:

【中文标题】Twitter Bootstrap 向 li 添加活动类【英文标题】：Twitter Bootstrap add active class to li 【发布时间】：2012-07-17 00:37:52 【问题描述】：

使用 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'); 
         
    );
)

但没有快乐。

【问题讨论】：

How to get Twitter-Bootstrap navigation to show active link?的可能重复这个问题是 Ruby。 【参考方案1】：

对于 Bootstrap 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');

更新

对于 Bootstrap 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');

【讨论】：

与我的 MVC 完美配合老问题，但我只是跳到这里，如果我有一个下拉菜单怎么办？和孩子的 href 与父母不匹配，但我想将父母设置为活动 @DannyG - 你不会在代码末尾添加这样的东西吗？ ".parent().parent().addClass('active');" 效果很好，谢谢。但是为什么需要 addClass() 的两个语句的技术是什么？一个都没有？代码块中的 cmets 会给你足够的细节。第一个用于完整 URL，第二个用于相对 URL【参考方案2】：

我们最终设法解决了：

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

【讨论】：

【参考方案3】：

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，如此处其他帖子所述。

希望这会有所帮助。

【讨论】：

我认为这是最好的答案这是最好的答案。【参考方案4】：

如果你放了

data-toggle="pill"

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

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

在标记下阅读

【讨论】：

太棒了。毕竟是不工作的 js 废话。经过 3 个问题的多个答案，发现 Bootstrap 确实具有内置切换功能。效果很好！只需将此代码添加到标记中！谢谢！【参考方案5】：

这为我完成了这项工作，包括活跃的主要下拉菜单和活跃的儿童（感谢 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');
);

【讨论】：

【参考方案6】：

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

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

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

【讨论】：

【参考方案7】：

试试这个。

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

【讨论】：

最好！曾在 AdminLTE 上工作必须在菜单渲染后运行。对于AdminLTE，它可以在一些脚本标签中的【参考方案8】：

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

$(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 对我不起作用。

【讨论】：

【参考方案9】：

以防万一您在 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>

【讨论】：

【参考方案10】：

解决方案很简单，不需要服务器端或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>

script.js

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

非常感谢本！ YouTube

【讨论】：

【参考方案11】：

在引导程序 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

【讨论】：

【参考方案12】：

这里是完整的 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

【讨论】：

看起来很有趣，但对 url 结构一点也不感兴趣。不过感谢您的努力。很好，但不是我所追求的，无论如何都欢呼根据你给定的问题细节，我做了同样的事情，所以你能详细解释一下你在 url 结构中想要什么..？我为什么要将 url 重命名为 #?page=1 等【参考方案13】：

这些都不适合我。我的 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.

);

【讨论】：

【参考方案14】：

要激活菜单和子菜单，即使 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/1 /posts/1/编辑

【讨论】：

【参考方案15】：

我遇到了同样的问题，这是我在我的应用启动脚本中添加的，并且运行顺利。这是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>

【讨论】：

【参考方案16】：

$(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");

);

更多详情Click Here!

【讨论】：

以上是关于Twitter Bootstrap 向 li 添加活动类的主要内容，如果未能解决你的问题，请参考以下文章

激活 Twitter Bootstrap 导航栏链接

如何让我的 Twitter Bootstrap 按钮右对齐？

自定义 Twitter Bootstrap 类名

如何使用 scrollspy 制作 Twitter Bootstrap 2.x 导航栏

动态时 Twitter Bootstrap .navbar-fixed-top 重叠站点

带有 Twitter Bootstrap 的下拉菜单