Bootstrap twitter Active导航栏-使用JQuery更改类名称
[英]Bootstrap twitter Active Navigation Bar - changing class names using JQuery
问题描述
Im using bootstrap twitter and I would like my different sites in the menu to show as active when clicked on. 
我正在使用bootstrap twitter，我希望菜单中的其他网站在单击时显示为活动。 I've found the question Bootstrap Twitter CSS Active Navigation which deals with this issue. 我发现了Bootstrap Twitter CSS Active Navigation问题，可以解决此问题。
My problem is that i cannot make the JQuery function in one of the answers to work. 我的问题是我无法使JQuery函数起作用。 The modifications should be very straight forward to make it work in my case which in HTML is: 修改应该非常直接，以使其在我的HTML中有效：
<script>
$('body').on('.nav li a', 'click', function()
{
var $thisLi = $(this).parents('li:first');
var $ul = $thisLi.parents('ul:first');
if (!$thisLi.hasClass('active'))
{
$ul.find('li.active').removeClass('active');
$thisLi.addClass('active');
}
});
</script>
<ul class="nav nav-pills pull-left">
<li class="active"> <a href="home.html">Home</a> </li>
<li> <a href="about.html">About</a> </li>
</ul>
Any clues as to what might be the problem? 关于可能是什么问题的任何线索？ Thank you in advance. 先感谢您。
4 个解决方案
解决方案1
5 已采纳 2013-03-20 12:59:57
To answer your question in the comment to the first answer, .parents('li') would get any li parents found as you walk up the DOM from your current position. 为了在第一个答案的注释中回答您的问题，.parents（'li'）将使您从当前位置走到DOM时找到任何li父母。 Adding the :first pseudo-selector ensures you get the first one found. 添加：first伪选择器可确保您找到第一个伪选择器。
A better solution is to use .parent (singular.) Such as: $thisLi.parent('ul') . 更好的解决方案是使用.parent（单数），例如： $thisLi.parent('ul') 。 I don't belive that is your problem though... 我不相信那是你的问题...
Is it possible the browser is just loading a new page on you? 浏览器是否可能正在为您加载新页面？ I don't see you calling event.preventDefault() , in fact you don't capture the event in your code, you just respond to it... 我看不到您调用event.preventDefault() ，实际上您没有在代码中捕获事件，只是对其进行响应...
Also, .on is the preferred way to bind to events now: 另外，.on是现在绑定事件的首选方式：
$(function(){
$('.nav li a').on('click', function(e){
e.preventDefault(); // prevent link click if necessary?
var $thisLi = $(this).parent('li');
var $ul = $thisLi.parent('ul');
if (!$thisLi.hasClass('active'))
{
$ul.find('li.active').removeClass('active');
$thisLi.addClass('active');
}
})
})
解决方案2
1 2013-07-27 05:46:22
I know this is a little late but, better late than never. 我知道这有点晚了，但是总比没有好。
I also had this same issue, and ended up writing my own code. 我也遇到了同样的问题，最终编写了自己的代码。
Hopefully this works for everyone as did me. 希望这和我一样对所有人都有效。
jQuery jQuery的
$(document).ready(function () {
var page = document.location.href;
// Set BaseURL
var baseURL = 'http://www.site.com/';
// Get current URL and replace baseURL
var href = window.location.href.replace(baseURL, '');
// Remove trailing slash
href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;
// Get last part of current URL
var page = href.substr(href.lastIndexOf('/') + 1);
if(page == ''){
$('#home').addClass('active');
}else{
$('#home').removeClass('active');
}
if(page == 'about'){
$('#about').addClass('active');
}else{
$('#about').removeClass('active');
}
if(page == 'terms'){
$('#terms').addClass('active');
}else{
$('#terms').removeClass('active');
}
if(page == 'contact'){
$('#contact').addClass('active');
}else{
$('#contact').removeClass('active');
}
});
Only difference from the standard Bootstrap menu bar was you have to add id="home" to the li for the home page, so on. 与标准Bootstrap菜单栏的唯一区别是您必须在首页的li中添加id =“ home”，依此类推。
解决方案3
0 2013-03-20 10:46:09
if (!$thisLi.hasClass('active'))
{
$ul.find('li').removeClass('active');
$thisLi.addClass('active');
}
解决方案4
0 2013-03-20 15:30:20
A very simple solution would be to manualy add a different class to the body of each of your pages which indicates which nav item should be active. 一个非常简单的解决方案是手动在每个页面的正文中添加一个不同的类，以指示应激活哪个导航项。
Then use jQuery to check what the class on the body is and set the active NAV LI class accordingly. 然后使用jQuery检查主体上的类是什么，并相应地设置活动的NAV LI类。
<body class="nav-1-active">
<ul>
<li class="nav1"><a href="#">Home</a></li>
<li class="nav2"><a href="#">About Us</a></li>
<li class="nav3"><a href="#">Our Services</a></li>
</ul>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.