logo标签列表

Bootstrap 3导航栏链接无法使用

javascriptjqueryhtmlcsstwitter-bootstrap
6

我有一个带有链接的导航栏。"brand"链接可以使用，但是

    中的内容都无法使用。我看到过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”或其他内容进行测试。 - The Disco Spider
我希望只需使用Bootstrap CSS而无需添加类。那不应该是Bootstrap CSS的一部分吗？这是我第一次遇到这种情况，我已经在其他导航栏菜单中使用了Bootstrap。这是第一次实现别人制作的模板。 - Beengie
1
请添加更多的HTML代码，否则很难猜测发生了什么。作为一种选择，我建议检查链接上的处理程序。 - iamawebgeek
链接是活动的（悬停/鼠标移动会改变链接的光标和CSS），但是当点击时，什么也不会发生。 - Beengie
我试图将商标移至第一个“ul”内部。它仍然无法工作。但是，当它嵌套在“navbar-header”中时，它可以工作。也许这确实与“preventDefault()”有关，但我不想覆盖bootstrap js文件。 - Beengie
显示剩余3条评论
10个回答
4

我遇到了由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";
};
6
这并不是一个真正的解决方案，而只是一个通过使用Javascript手动链接到请求的URL来修复问题的技巧。 - MeanGreen
3
为了使外部链接（即所有不是锚点的链接）在导航中能够正常工作，只需在你的 <a> 元素中添加值为“external”的 class 属性即可。 <a href="foo.html" class="external">Foo</a>。这在使用jquery.nav.js时对我有所帮助。
你是从这个答案中获取的吗？那么你忘记了JS代码。 - robsch
好的，这个答案解释了它是Bootstrap JS的一部分。 - robsch
1

我不确定你的代码出了什么问题，但如果你的链接上有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);
});
很遗憾，那并没有改变任何事情。 - Beengie
有没有办法避免修改jQuery文件？ - Beengie
你不需要修改你的 jQuery。你只需要在你的平滑滚动代码上进行更改。请查看我的第二个更新。 - iamawebgeek
对于任何搜索与d3.js相关的问题的人来说：此答案中删除事件处理程序的第一个代码示例解决了问题！我在一个带有d3.js图表的网站上使用bootstrap导航栏，下拉菜单下面的链接无法工作。似乎d3.js将某些事件处理程序附加到这些链接，从而阻止路由。 - kinske
0
在我的情况下，问题是由于平滑滚动的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);
    });

如果你很着急，希望这能帮到你。

0
在我的情况下，问题是由一个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;

当我完全删除了return语句后，它又正常工作了。

0

我的 anchor 链接在 bootstrap 导航栏中也无法正常工作，经过阅读这里的答案后，我发现是平滑滚动引起了问题。底部的脚本...

  // 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标签，但必须在底部的脚本中添加每个哈希#名称，然后它就可以正常工作了！

0

我不知道这是否有帮助，但当我在HTML元素上放置overflow-x:hidden时，我遇到了同样的问题。

仅在body元素上时它可以工作，我正在进行一些实验，因为我有一些奇怪的溢出情况。

所以当我移除在html元素上的overflow-x时，实际上会出现与你所说的相同问题，悬停和其他所有功能都可以正常工作，但链接实际上无法使用。

0
我添加了 class="external nav"，这使得我的导航栏中的链接起作用了。
0

我有同样的问题，将链接扩展名从html更改为htm解决了它。奇怪，以前从未遇到过这种情况？

0
请检查您链接的格式。 - Thomas Hirsch
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接