Javascript Bootstrap 3 导航栏链接不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28554349/
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
Bootstrap 3 navbar links not working
提问by Beengie
I have a navbar with links in it. The "brand" link is working but nothing in the uldoes. I have read things about e.preventDefault();being a problem when it is with the $('ul.nav > li').click(function (e) {. I also have read where it has something to do with the z-index. I don't find any of those to be the case (unless I couldn't find it embedded in a jsfile loaded with the application and not residing in my assets folder).
我有一个带有链接的导航栏。“品牌”链接正在工作，但没有任何ul作用。我已经阅读了有关e.preventDefault();在使用$('ul.nav > li').click(function (e) {. 我也读过它与z-index. 我没有发现任何一种情况（除非我找不到它嵌入在js应用程序加载的文件中并且不在我的资产文件夹中）。
What could cause this?
什么可能导致这种情况？
I'm not sure whether it would be in the cssor the jsfile.
Also, the toggle works fine, it's just the active links.
我不确定它是在文件中css还是在js文件中。此外，切换工作正常，它只是活动链接。
<head>
<title>Welcome</title>
<meta charset='utf-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<meta content='' name='description'>
<meta content='' name='author'>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="PZfcHJlhwRF4SMTlLODmWg4gv/d8eli2VqnZm1i/dnjyUhKjUkZXq+2jeMjfU/eYiArG5oU0Ur1VG6GLBYik6Q==" />
<link rel="stylesheet" media="screen" href="/assets/rails_bootstrap_forms-85a44da0cf14906976bde10ea0a42bbc.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/application-7b065b027fe33201010948bc34f4a7db.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/font-awesome.min-c657d02924cca8259559612983a6a227.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/modern-business-788410311885bd8eb9a8a947b93e1c6f.css?body=1" />
<script src="/assets/bootstrap-f069863cd7c15927c7faef4bba9fc907.js?body=1"></script>
<script src="/assets/bootstrap.min-759065b3d223bc01ce2f7ad79e06c909.js?body=1"></script>
<script src="/assets/contact_me-55e60d5e2f601e0adf79fc9dea175bf3.js?body=1"></script>
<script src="/assets/jqBootstrapValidation-d5764d00e4f4b8d79882008d22d482fa.js?body=1"></script>
<script src="/assets/jquery-89fdfdd2b961da1c1dac57e8beeff312.js?body=1"></script>
<script src="/assets/application-467c055a5b9b03c420678f7bae6bd21f.js?body=1"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> <![endif]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
<div class='container'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='/'>Brand</a>
</div>
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav navbar-right'>
<li><a href='/about.html'>About</a></li>
<li><a href='/services.html'>Services</a></li>
<li><a href='/contact.html'>Contact</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Portfolio
<b class='caret'></b></a>
<ul class='dropdown-menu'>
<li>
<a href='/this.html'>This</a>
</li>
<li>
<a href='/that.html'>That</a>
</li>
<li>
<a href='/other.html'>The other</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Blog
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='/bikes.html'>Bikes</a>
</li>
<li>
<a href='/planes.html'>Planes</a>
</li>
<li>
<a href='/trains.html'>Trains</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Other Pages
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='/candy.html'>Candy</a>
</li>
<li>
<a href='/fruit.html'>Fruit</a>
</li>
<li>
<a href='/lost.html'>Lost</a>
</li>
<li>
<a href='/found.html'>Found</a>
</li>
<li>
<a href='/haircuts.html'>Hair Cuts</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
While inspecting elements, I found an error...
TypeError: undefined is not an object (evaluating '$(target).offset().top')which points to this part of the jquery.jsfile.
在检查元素时，我发现了一个错误......
TypeError: undefined is not an object (evaluating '$(target).offset().top')它指向jquery.js文件的这一部分。
//smooth scroll
$('.navbar-nav > li').click(function(event) {
event.preventDefault();
var target = $(this).find('>a').prop('hash');
$('html, body').animate({
scrollTop: $(target).offset().top // this line here
}, 500);
});
However, when I look at the jquery documentation (http://api.jquery.com/event.preventdefault/), it say, "If this method is called, the default action of the event will not be triggered.". So it seems that might be the case, but I'm not sure how to get around it.
但是，当我查看 jquery 文档（http://api.jquery.com/event.preventdefault/）时，它说，“如果调用此方法，则不会触发事件的默认操作。”。所以看起来可能是这种情况，但我不知道如何解决它。
采纳答案by Goodlife
I had the very same problem caused by Javascript. Just give the a link an ID and the OnClick function lets you navigate smoothly.
我遇到了由 Javascript 引起的完全相同的问题。只需给链接一个 ID，OnClick 功能就可以让您顺利导航。
HTML :
HTML :
<div class="navbar-collapse collapse " id="templatemo-nav-bar">
<ul class="nav navbar-nav navbar-right" style="margin-top: 40px;">
<li class="active"><a href="index.htm">HOME</a></li>
<li><a id="aboutus">ABOUT US</a></li>
<li><a id="clients">OUR CLIENTS</a></li>
<li><a id="products">PRODUCTS</a></li>
<li><a id="contact">CONTACT</a></li>
</ul>
</div><!--/.nav-collapse -->
JS :
JS：
document.getElementById("aboutus").onclick = function () {
location.href = "aboutus.html";
};
回答by SabRallte
To make an external link (all links that are not anchors) work inside the nav just add the class attribute with the value "external" inside youre <a>element.
<a href="foo.html" class="external">Foo</a>. This helped me while using jquery.nav.js.
要使外部链接（不是锚点的所有链接）在导航中工作，只需在您的<a>元素中添加值为“external”的类属性。
<a href="foo.html" class="external">Foo</a>. 这在使用 jquery.nav.js 时对我有帮助。
回答by iamawebgeek
I am not sure what is happening with your code, but if there are js event handlers attached to your links you can try to remove handlers on links using:
我不确定您的代码发生了什么，但是如果您的链接附加了 js 事件处理程序，您可以尝试使用以下方法删除链接上的处理程序：
$(document).ready(function () {
$("#bs-example-navbar-collapse-1").find("a:not(.dropdown-toggle)").off("click").off("mousedown");
});
Update
Try to manually send user to link, but this is not the right way. You can use the following code to verify are there any mask layers hiding the link (if nothing happened this time also than there are layers).
更新
尝试手动将用户发送到链接，但这不是正确的方法。您可以使用以下代码来验证是否有任何遮罩层隐藏了链接（如果这次没有发生任何事情，那么也有层）。
$(document).ready(function () {
$("#bs-example-navbar-collapse-1").find("a:not(.dropdown-toggle)").on("click", function (e) {
e.preventDefault();
window.location = $(this).attr("href");
});
});
Update 2
The problem is in your smooth scroll. You dont have hash property in your links.
Change your code to:
更新 2
问题在于您的平滑滚动。您的链接中没有哈希属性。
将您的代码更改为：
$('.navbar-nav > li').click(function(event) {
if($(this).parent().parent().is("#bs-example-navbar-collapse-1")) return;
event.preventDefault();
var target = $(this).find('>a').prop('hash');
$('html, body').animate({
scrollTop: $(target).offset().top // this line here
}, 500);
});
回答by tony
I have the same problem and changing the link extension to htm instead of html fixed it. Weird never had this happen before?
我有同样的问题，将链接扩展名更改为 htm 而不是 html 修复了它。奇怪，以前从来没有过这种情况？
回答by Sharif
I had the same problem with my anchor links not working in my bootstrap nav bar, and after reading the answers here, it WAS the smooth scrolling that caused the problem. The script at the bottom...
我的锚链接在我的引导导航栏中不起作用，我遇到了同样的问题，在阅读了这里的答案后，是平滑滚动导致了问题。底部的脚本...
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a[href='#paintings'], a[href='#digitalart'], a[href='#advertisements'], a[href='#packaging'], a[href='#layout'], a[href='#logos'], a[href='#apparel'], a[href='#animation'], a[href='#videoproduction'], a[href='#frontend'], a[href='#landingpages'], a[href='#emailmarketing'], footer a[href='#PageTop'], a[href='#Back2Top']").on('click', function(event) {
...I kept using the ID tag, but had to add each hash #name to the script at the bottom and then it all worked fine!
...我一直使用 ID 标签，但必须将每个哈希 #name 添加到底部的脚本中，然后一切正常！
回答by Rory Perro
I added class="external nav", and that allowed my links to work in the navbar.
我添加了 class="external nav"，这允许我的链接在导航栏中工作。
回答by MeanGreen
In my case, the problem was caused by a Javascript function, designed to detect a click anywhere on the page, but outside a specific menu div, in order to close it.
就我而言，问题是由 Javascript 函数引起的，该函数旨在检测页面上任何位置但在特定菜单 div 之外的点击，以便关闭它。
Replacing this:
替换这个：
$(this).click(function () {
if ($('#accountMenu').is(':visible')) {
$('#accountMenu').hide();
}
});
with
和
$(document).mouseup(function (e) {
var container = $("#accountMenu");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
helped me solve the problem.
帮我解决了问题。
The second fix needed was the function to handle opening the menu. The offending line being:
需要的第二个修复是处理打开菜单的功能。违规行是：
return false;
Once I removed the return completely it's working fine again.
一旦我完全删除了退货，它又可以正常工作了。
回答by squizyt
I dont know if it helps but i had the same problem when i put overflow-x:hidden on html elemenet.
我不知道它是否有帮助，但是当我将 overflow-x:hidden 放在 html elemenet 上时，我遇到了同样的问题。
When just on body element it works, i was experimenting because i had some strange overflow.
当仅在 body 元素上工作时，我正在尝试，因为我有一些奇怪的溢出。
So when i removed put overflow-x on html element actually the same problem occured like you said, hover and everything works but the link actually doesn't.
因此，当我删除 put overflow-x 在 html 元素上时，实际上发生了与您所说的相同的问题，悬停并且一切正常，但链接实际上没有。
回答by bobito
In my case, the problem was caused by the smooth scroll Javascript function that I had to delete in a second .js cloned file called for my particular case instead of the main one (I'll try to understand when I'll have time) :
就我而言，问题是由平滑滚动 Javascript 函数引起的，我必须在为我的特定案例而不是主要案例调用的第二个 .js 克隆文件中删除该函数（我将尝试了解何时有时间） ：
//smooth scroll
$('.navbar-nav > li').click(function (event) {
event.preventDefault();
var target = $(this).find('>a').prop('hash');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
});
Hope this helps if in a hurry.
如果赶时间，希望这会有所帮助。
