Bootstrap 3 导航栏链接不起作用答案

【问题标题】：Bootstrap 3 navbar links not workingBootstrap 3 导航栏链接不起作用
【发布时间】：2015-04-17 17:26:28
【问题描述】：

我有一个带有链接的导航栏。 “品牌”链接有效，但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>

在检查元素时，我发现了一个错误... 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);
});

但是，当我查看 jquery 文档 (http://api.jquery.com/event.preventdefault/) 时，它说“如果调用此方法，则不会触发事件的默认操作。”。所以看起来可能是这种情况，但我不确定如何解决它。

【问题讨论】：

您是否尝试过为链接提供“navbar-link”类？代码看起来正确。还要确保链接正确。尝试为其中一个链接添加“Google .com”或其他内容以进行测试。
我希望只使用引导 css 而不必添加类。那不应该是引导CSS的一部分吗？这是我第一次遇到这种情况，并且我已将引导程序用于其他导航栏菜单。这是第一次实现别人制作的模板。
尝试删除顶部 ul 标签上的 navbar-right 类，然后尝试点击链接。评论他们是否在工作。
我试过@zazu，但它只是将内容移到了左边。
请包含更多 HTML，否则很难猜测发生了什么。作为一种变体，我可以建议检查链接上的处理程序。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我遇到了由 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";
};

【讨论】：

这不是真正的解决方案，只是通过使用 Javascript 手动链接到请求的 URL 来解决问题的技巧。

【解决方案2】：

要使外部链接（所有不是锚点的链接）在导航中工作，只需在 <a> 元素中添加值为“external”的类属性。 <a href="foo.html" class="external">Foo</a> 。这在使用 jquery.nav.js 时帮助了我。

【讨论】：

您是从this answer 收到的吗？比你忘记了JS代码。
好的 that answer 解释说它是 bootstrap JS 的一部分。

【解决方案3】：

我不确定您的代码发生了什么，但如果您的链接附加了 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);
});

【讨论】：

不幸的是，这并没有改变任何东西。
有没有办法避免修改jquery文件？
你不要修改你的 jquery。您只需要更改平滑滚动代码即可。查看我的第二次更新。
对于任何正在搜索与 d3.js 相关的问题的人：这个答案的第一个代码示例删除了事件处理程序就成功了！我在具有 d3.js 图表的站点上使用引导导航栏，并且导航栏下拉列表下方的链接不起作用。似乎 d3.js 正在将一些事件处理程序附加到此链接，这会阻止路由。

【解决方案4】：

我有同样的问题，将链接扩展名更改为 htm 而不是 html 修复了它。奇怪以前从未发生过这种情况？

【讨论】：

【解决方案5】：

在我的例子中，问题是由 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;

一旦我完全删除了退货，它又可以正常工作了。

【讨论】：

【解决方案6】：

我不知道它是否有帮助，但是当我将 overflow-x:hidden 放在 html elemenet 上时，我遇到了同样的问题。

当它只在 body 元素上工作时，我正在试验，因为我有一些奇怪的溢出。

所以当我删除 put overflow-x on html 元素时，实际上发生了同样的问题，就像你说的那样，悬停并且一切正常，但链接实际上没有。

【讨论】：

【解决方案7】：

在我的情况下，问题是由平滑滚动 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);
    });

如果赶时间，希望这会有所帮助。

【讨论】：

【解决方案8】：

我的锚链接在我的引导导航栏中不起作用时遇到了同样的问题，在阅读了这里的答案之后，是平滑滚动导致了问题。底部的脚本...

  // 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 标签，但必须将每个哈希 #name 添加到底部的脚本中，然后一切正常！

【讨论】：

【解决方案9】：

我添加了 class="external nav"，这让我的链接可以在导航栏中工作。

【讨论】：

【解决方案10】：

就我而言，我可以通过在导航类中添加“sticky-top”来解决这个问题。我希望它可以帮助。 In this case I used BootstrapCDN https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn

【讨论】：

请检查您的链接格式。