jQuery 如何从 Twitter 引导程序将活动类设置为导航菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15082316/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to set active class to nav menu from twitter bootstrap
提问by Priyanka
I'm new to the twitter bootstrap. Using there navigation menus. I'm trying to set active class to selected menu. my menu is -
我是twitter bootstrap 的新手。使用那里的导航菜单。我正在尝试将活动类设置为选定的菜单。我的菜单是——
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active"><a href="~/Home/Index">Home</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">Staff</a></li>
<li id="broker"><a href="~/Home/Broker">Broker</a></li>
<li><a href="#">Sale</a></li>
</ul>
</div>
I tried following thing after googling on this that i have to set active class on each page from menu like as--
我在谷歌搜索之后尝试了以下内容，我必须从菜单中的每个页面上设置活动类，例如 -
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
but problem for above is that i set home menu selected by default. Then it always get selected. Is there any other way to do this ? , or which i can generalize and keep my js in layout file itself?
但上面的问题是我设置了默认选择的主菜单。然后它总是被选中。有没有其他方法可以做到这一点？，或者我可以概括并将我的 js 保留在布局文件本身中？
After executing application my menu looks -
执行应用程序后，我的菜单看起来 -
after clicking on other menu item i get following result-
单击其他菜单项后，我得到以下结果-
And i added following scripts on Index view and Broker view ---
我在索引视图和代理视图上添加了以下脚本---
<script>
$(document).ready(function () {
$('#home').addClass('active');
});
</script>
<script>
$(document).ready(function () {
$('#broker').addClass('active');
});
</script>
respectively.
分别。
采纳答案by Dakait
it is a workaround. try
这是一种解决方法。尝试
<div class="nav-collapse">
<ul class="nav">
<li id="home" class="active"><a href="~/Home/Index">Home</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">Staff</a></li>
<li id="demo"><a href="~/Home/demo">Broker</a></li>
<li id='sale'><a href="#">Sale</a></li>
</ul>
</div>
and on each page js add
并在每个页面上 js 添加
$(document).ready(function () {
$(".nav li").removeClass("active");//this will remove the active class from
//previously active menu item
$('#home').addClass('active');
//for demo
//$('#demo').addClass('active');
//for sale
//$('#sale').addClass('active');
});
回答by Leniel Maccaferri
You can use this JavaScript\jQuerycode:
您可以使用此JavaScript\jQuery代码：
// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');
It'll set the <a>'s parent <li>and the <li>'s parent <ul>as active.
它会将<a>的父级<li>和<li>的父级设置<ul>为活动的。
A simple solution that works!
一个简单有效的解决方案！
Original source:
原始来源：
回答by Mirko
I had the same problem... solved it by adding the code shown below to the Into "$(document).ready" part of my "functions.js" file which is included in every page footer. It's pretty simple. It gets the full current URL of the displayed page and compares it to the full anchor href URL. If they are the same, set anchor (li) parent as active. And do this only if anchor href value is not "#", then the bootstrap will solve it.
我遇到了同样的问题......通过将下面显示的代码添加到我的“functions.js”文件的“$(document).ready”部分来解决它，该文件包含在每个页面页脚中。这很简单。它获取显示页面的完整当前 URL，并将其与完整的锚点 href URL 进行比较。如果它们相同，则将锚（li）父设置为活动。并且仅当锚点 href 值不是“#”时才这样做，然后引导程序将解决它。
$(document).ready(function () {
$(function(){
var current_page_URL = location.href;
$( "a" ).each(function() {
if ($(this).attr("href") !== "#") {
var target_URL = $(this).prop("href");
if (target_URL == current_page_URL) {
$('nav a').parents('li, ul').removeClass('active');
$(this).parent('li').addClass('active');
return false;
}
}
}); }); });
回答by Luke Green
For single-page sites where the menu items simply jump down to other sections of the page, this simple solution works for me:
对于菜单项简单地跳到页面其他部分的单页网站，这个简单的解决方案对我有用：
$('.nav li').on('click', function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});
回答by Apeto
<div class="nav-collapse">
<ul class="nav">
<li class="home"><a href="~/Home/Index">Home</a></li>
<li class="Project"><a href="#">Project</a></li>
<li class="Customer"><a href="#">Customer</a></li>
<li class="Staff"><a href="#">Staff</a></li>
<li class="Broker"><a href="~/Home/Broker">Broker</a></li>
<li class="Sale"><a href="#">Sale</a></li>
</ul>
</div>
$('ul.nav>li.home>a').click(); // first. same to all the other options changing the li class name
回答by Billy Moat
You could add a diffrent class onto the BODY tag on each page e.g. on the homepage you could have this:
您可以在每个页面的 BODY 标签上添加一个不同的类，例如在主页上，您可以拥有：
<body class="nav-1-on">
Then this css:
然后这个css：
.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
// set your styles here
}
The NAV element:
资产净值要素：
<ul>
<li class="nav-1"><a href="#">Home</a></li>
<li class="nav-2"><a href="#">Services</a></li>
<li class="nav-3"><a href="#">About</a></li>
<li class="nav-4"><a href="#">Contact</a></li>
</ul>
Alternatively you could place a class on the BODY on each page and then grab that via jQuery and add the .active class to the correct nav item based on that tag.
或者，您可以在每个页面的 BODY 上放置一个类，然后通过 jQuery 获取该类并将 .active 类添加到基于该标签的正确导航项中。
回答by anyavacy
<div class="nav-collapse">
<ul class="nav">
<li class="home"><a href="~/Home/Index">Home</a></li>
<li class="Project"><a href="#">Project</a></li>
<li class="Customer"><a href="#">Customer</a></li>
<li class="Staff"><a href="#">Staff</a></li>
<li class="Broker"><a href="~/Home/Broker">Broker</a></li>
<li class="Sale"><a href="#">Sale</a></li>
</ul>
</div>
then for each page you add this:
然后为每个页面添加以下内容：
//home
//家
$(document).ready(function () {
$('.home').addClass('active');
});
//Project page
//项目页面
$(document).ready(function () {
$('.Project').addClass('active');
});
//Customer page
//客户页面
$(document).ready(function () {
$('.Customer').addClass('active');
});
//staff page
//员工页面
$(document).ready(function () {
$('.Staff').addClass('active');
});
回答by Hardik Gajjar
$( ".nav li" ).click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
check this out.
看一下这个。
回答by YanZhiwei
(function (window) {
bs3Utils = {}
bs3Utils.nav = {
activeTab: function (tabId) {
/// <summary>
/// 设置需要展现的tab
/// </summary>
/// <param name="tabId"></param>
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
}
}
window.bs3Utils = bs3Utils;
})(window);
example:
例子：
var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2';
bs3Utils.nav.activeTab(_actvieTab);
<ul class="nav nav-tabs">
<li class="active">
<a href="#portlet_tab2_1" data-toggle="tab">箱-单灯节点 </a>
</li>
<li>
<a href="#portlet_tab2_2" data-toggle="tab">箱-灯组节点 </a>
</li>
</ul>
回答by bchr02
For single page sites, the following is what I used. It not only sets the active element based on what's been clicked but it also checks for a hash value within the URL location on initial page load.
对于单页站点，以下是我使用的。它不仅根据点击的内容设置活动元素，而且还在初始页面加载时检查 URL 位置中的哈希值。
$(document).ready(function () {
var removeActive = function() {
$( "nav a" ).parents( "li, ul" ).removeClass("active");
};
$( ".nav li" ).click(function() {
removeActive();
$(this).addClass( "active" );
});
removeActive();
$( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );
});
