Twitter Bootstrap将活动类添加到li
使用twitter引导，我需要启动主导航的李部分主动类。 自动的。 我们使用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'); } }); })
但没有喜乐。
试试这个：适合我
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');
我们终于修复了：
/*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'); } }); });
你真的不需要任何带有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>
在select菜单项之后要做更多的任务，你需要JS，这里的其他post解释了这个。
希望这可以帮助。
如果你放
data-toggle="pill"
在标签中它应该自动工作。
http://twitter.github.com/bootstrap/javascript.html#tabs
在标记下阅读
这为我做了工作，包括积极的主要下拉菜单和积极的儿童 （感谢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'); });
如果您正在使用包含路由和操作的MVC框架：
$(document).ready(function () { $('a[href="' + this.location.pathname + '"]').parent().addClass('active'); });
正如Christian Landgren的这个答案所示： https ://stackoverflow.com/a/13375529/101662
这对我来说很好。 它将两个简单的导航元素和下拉导航元素标记为活动状态。
$(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'); });
将$('ul.nav a[href="'...'"]')传递给$('ul.nav a[href="'...'"]')也会标记简单的导航元素。 通过url没有为我工作。
尝试这个。
// 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');
以防在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>
解决scheme很简单，不需要服务器端或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>
非常感谢Ben！ YouTube的
这里是完整的Twitter引导示例，并基于查询string应用活动类。
几个步骤，以实现正确的解决scheme：
1）包含最新的jquery.js和bootstrap.js JavaScript文件。
2）包含最新的bootstrap.css文件
3）在js中包含查询stringvariables值的querystring-0.9.0.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不完全匹配。 所以这就是我所做的，基于我的例外情况。 希望它可以帮助别人：
//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. });
要激活菜单和子菜单，甚至在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：
/职位
/职位/ 1
/职位/ 1 /编辑
我有同样的问题，这是我在我的应用程序启动脚本中添加的，并且工作顺利。 这里是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 ，一个惊人的开源pipe理模板，并支持许多前端框架，如Angular，普通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>
