导航栏链接不起作用答案

【问题标题】：Nav bar links not working导航栏链接不起作用
【发布时间】：2018-03-25 14:11:32
【问题描述】：

我正在使用引导程序制作网站。我制作了一个导航栏，我希望菜单项链接到不同的站点。但是它根本不起作用 - 获取工作链接通常从来都不是问题，但我是使用 Bootstrap 的新手，我觉得我错过了一些东西 - 你需要一个 js 代码来让你的链接工作吗?通常我只是写一些东西，就像我把所有的网站都放在同一个文件夹里一样，我现在已经尝试了很多东西。我也尝试过提供项目和 ID，然后添加 js 代码，但没有任何反应。

$(document).ready(function() {
  $('#aboutus').on('click', function() {
    location.href = "About kopi.html";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">

  <nav class="row navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Name</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Portfolio.html">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="About kopi.html" id="aboutus">About</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

【问题讨论】：

您是否在源代码中包含了 Bootstrap 文件（CSS 和 JS）和 jQuery？
是控制台或css中的任何错误检查指针事件：不存在或不存在
是的，如果你的意思是：
@Maria 请看看我是如何从你的帖子中创建一个minimal reproducible example
如果你点击的时候确实需要在JS中做东西，你可能要停止链接$('#aboutus').on('click', function(e) { e.preventDefault(); location = $(this).prop("href") });

标签： javascript hyperlink navbar bootstrap-4

【解决方案1】：

嗨，玛丽亚，欢迎来到 Stack Overflow。

a 标签的语法是正确的。因此它应该工作。

说您的链接不起作用，这是非常含糊的。你可以尝试什么：

确保加载了 Bootstrap 中的所有样式和脚本。（这包括 jQuery 和 Popper.js 等依赖项）
确保您所引用的页面确实存在。（这个文件：Portfolio.html 存在吗？）

【讨论】：

是的，投资组合页面和索引（主页）确实存在，但其他的还没有制作。我想我先将投资组合链接到索引 html。对不起，我的意思是当我点击我的菜单项（在这种情况下是投资组合）时，它没有链接到我请求的页面。这通常不是问题，但这个引导程序对我来说是新的

【解决方案2】：

看起来您在标记中使用了一些特定于 Bootstrap 4 的类，但包括 Bootstrap 3 JS 和 CSS。

尝试改用 Bootstrap 4 文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"/>

这是我为尝试重现您的问题而创建的小提琴。它似乎适用于 Bootstrap 4 文件：

https://jsfiddle.net/bbz0t198/

【讨论】：