Bootstrap 3导航条链接不工作
Bootstrap 3 navbar links not working
我有一个导航栏，里面有链接。"brand"链接正在工作，但ul中没有任何链接。我读过一些关于e.preventDefault();在使用$('ul.nav > li').click(function (e) {时会出现问题的文章。我也读过它和z-index有关的地方。我没有发现任何这样的情况（除非我找不到它嵌入到与应用程序一起加载的js文件中，并且不在我的资产文件夹中）。
是什么原因造成的？
我不确定它是在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>
在检查元件时，我发现了一个错误。。。指向CCD_ 9文件的这一部分的CCD_。
//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);
});
但是，当我查看jquery文档时(http://api.jquery.com/event.preventdefault/)，它说，"如果调用这个方法，事件的默认操作将不会被触发。"。所以看起来可能是这样，但我不确定如何绕过它。
我遇到了由Javascript引起的同样的问题。只要给链接一个ID，OnClick功能就可以让你顺利导航。
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:
document.getElementById("aboutus").onclick = function () {
location.href = "aboutus.html";
};
要使外部链接（所有不是锚点的链接）在导航中工作，只需在<a>元素中添加值为"external"的class属性。CCD_ 11。这帮助了我使用jquery.nav.js.
我不确定你的代码发生了什么，但如果你的链接上附加了js事件处理程序，你可以尝试使用删除链接上的处理程序
$(document).ready(function () {
$("#bs-example-navbar-collapse-1").find("a:not(.dropdown-toggle)").off("click").off("mousedown");
});
更新
尝试手动将用户发送到链接，但这不是正确的方式。您可以使用以下代码来验证是否有任何遮罩层隐藏链接（如果这次没有发生任何事情，也有层）。
$(document).ready(function () {
$("#bs-example-navbar-collapse-1").find("a:not(.dropdown-toggle)").on("click", function (e) {
e.preventDefault();
window.location = $(this).attr("href");
});
});
更新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);
});
我也遇到了同样的问题，将链接扩展名改为htm而不是html解决了这个问题。奇怪以前从未发生过这种情况吗？
在我的案例中，问题是由Javascript函数引起的，该函数旨在检测页面上任何地方的点击，但在特定菜单div之外，以便关闭它。
替换此：
$(this).click(function () {
if ($('#accountMenu').is(':visible')) {
$('#accountMenu').hide();
}
});
带有
$(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();
}
});
帮我解决了这个问题。
需要的第二个修复是处理打开菜单的功能。违规线路为：
return false;
一旦我完全去掉了退货，它又恢复了正常工作。
我不知道这是否有帮助，但当我在html elemenet上放置overflow-x:hidden时，我也遇到了同样的问题。
当只在身体元素上工作时，我在试验，因为我有一些奇怪的溢出。
所以，当我删除html元素上的put overflow-x时，实际上也出现了同样的问题，就像你说的，悬停，一切都正常，但链接实际上不正常。
在我的案例中，问题是由平滑滚动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);
});
希望这能在匆忙中有所帮助。
我的引导程序导航栏中的锚链接不起作用，我也遇到了同样的问题，在阅读了这里的答案后，是平滑滚动导致了问题。底部的脚本。。。
// 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) {
我一直在使用ID标记，但必须将每个hash#名称添加到底部的脚本中，然后一切都很好！
我添加了class="external nav"，这允许我的链接在导航栏中工作。
在我的情况下，我可以通过添加"粘性顶部"；进入导航类。我希望它能有所帮助。在这种情况下，我使用了BootstrapCDNhttps://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn
相关文章：
- 通过链接重定向不;我不在jstree中工作
- JavaScript链接在点击时不起作用;函数在页面加载时工作
- 谷歌公共日历链接没有'不工作(完整日历）
- HTML5 Shiv谷歌CDN链接不工作
- 链接don'由于Javascript悬停效果，无法在移动设备上工作
- 我如何使这个YouTube链接在iOS上工作
- 链接悬停css在不浮动时不在表浮动标题中工作
- 绝对链接/相对链接均未获胜't在菜单中工作
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 谷歌jQuery UI链接无法脱机工作
- 谷歌分析跟踪内部链接不正常工作的事件
- 当我添加JavaScript时，链接按钮停止工作
- ajax代码工作时，使用javascript禁用html中的链接
- Jquery/CS3转换链接只能部分工作
- 禁用触摸设备上的单击链接未按预期工作
- 对链接的 svg 进行动画处理不起作用;内联时工作正常
- IJava脚本无法正常工作/链接正常
- 为什么这个下拉菜单没有填充工作链接
- SimpleCart.js项链接未定义，可以'I don’我无法获得工作链接
- 如果一个javascript函数被分配给一个工作链接，该函数会首先执行吗
