Bootstrap 3 导航栏链接不起作用

2024-03-05

我有一个带有链接的导航栏。 “品牌”链接有效,但没有任何内容ul做。我读过关于e.preventDefault();当它与$('ul.nav > li').click(function (e) {。我也读过它与z-index。我没有发现任何这样的情况(除非我找不到它嵌入到js文件与应用程序一起加载,并且不驻留在我的资产文件夹中)。

什么可能导致这种情况?

我不确定它是否会在css or the 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 file.

//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/ 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";
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap 3 导航栏链接不起作用 的相关文章

  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • AJAX:检查字符串是否为 JSON?

    我的 JavaScript 有时会在这一行崩溃 var json eval this responseText 当争论时会导致崩溃eval 不是 JSON 在进行此调用之前有什么方法可以检查字符串是否为 JSON 我不想使用框架 有什么方法
  • 访问 TypeScript 数组的最后一个元素

    TypeScript 中有访问数组最后一个元素的符号吗 在 Ruby 中我可以说 array 1 有类似的东西吗 您可以通过索引访问数组元素 数组中最后一个元素的索引将是数组的长度 1 因为索引是从零开始的 这应该有效 var items
  • 角度 2 中的动态 styleUrls?

    是否可以将样式表的 url 动态注入到组件中 就像是 styleUrls stylesheet1 css this additionalUrls 或者 一厢情愿并注意这只是假代码 export class MyComponent imple
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 如何滚动到div内的元素?

    我有一个滚动的div我想在点击它时发生一个事件 它会强制执行此操作div滚动以查看内部元素 我写的JavasCript是这样的 document getElementById chr scrollIntoView true 但这会在滚动时滚
  • 选中复选框时提交表单

    有没有办法在选中复选框时提交表单
  • React无限滚动scrollableTarget动态获取id?

    我在我的项目中使用react infinite scroll component 如何让scrollableTarget动态获取item id 我试过这样scrollableTarget item id 但它不起作用 必须与该 div 具有
  • 是否可以使用打字稿映射类型来创建接口的非函数属性类型?

    所以我正在研究 Typescript 的映射类型 是否可以创建一个接口来包装另一种类型 从而从原始类型中删除函数 例如 interface Person name string age number speak void type Data
  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色
  • 使用 html5 分块上传文件

    我正在尝试使用 html5 的文件 API 分块上传文件 然后在服务器端用 php 重新组装它 我正在上传视频 但是当我在服务器端合并文件时 大小增加了 并且它变成了无效文件 请注意 以下 html5 代码仅适用于 chrome 浏览器 在
  • ES6 模板文字的延迟执行

    我正在玩新的ES6 模板文字 http tc39wiki calculist org es6 template strings 我首先想到的是String format对于 JavaScript 所以我开始实现一个原型 String pro
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • 替换两个引号之间的字符串

    我想转动一根绳子str hello my name is michael what s your s into hello my name is span class name michael span 我怎样才能在 JavaScript
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • 在javascript中动态生成行?

    我是 javascript 新手 我想在按下 Tab 时动态生成行 并希望获取在动态生成的行中输入的值 以便我可以在 servlet 代码中使用这些值 这是我的html
  • gwt 中的垂直居中

    如何使用垂直面板在 gwt 中垂直居中 或者请告诉我有什么方法可以进行垂直居中 如果你想直接使用VerticalPanel从代码中 您需要使用setVerticalAlignment HasVerticalAlignment ALIGN M
  • Restangular - _.contains() 不是一个函数

    如果您最近通过 Bower 更新了 Restangular 它将安装最新的 Lodash 新的 4 0 然而 这是一个问题 因为 Restangular Angular 现在会抛出错误 contains 不是函数 你怎么解决 解决方案非常简
  • 在 javascript 中使用 xPath 解析具有默认命名空间的 XML

    我需要创建一个 XML xPath 解析器 所有解析都必须在客户端进行 使用 JavaScript 我创建了一个 javascript 来执行此操作 在默认名称空间发挥作用之前 一切看起来都正常 我根本无法查询具有默认命名空间的 XML 我
  • jQuery:动态添加 DOM 元素时尝试将函数挂钩到 onclick,但它立即执行该函数

    我正在使用 jQuery 动态 我的意思是在运行时 向页面的 DOM 添加一个 span 元素 create add task button document createElement span attr id activityNameH

随机推荐

  • Google Protocol Buffers:根据我的请求设置日期值时,c.toArray 不是函数

    我正在尝试构建一个创建请求grpc web 我已经生成了协议缓冲区 并且可以成功获取信息 但在创建请求时遇到问题 Eg const request new PricingMethodRequest request setCurrencyId
  • 我的 Windows 窗体应用程序大小在不同笔记本上发生变化

    我的项目编码进展顺利 但今天我注意到一个问题 我的主笔记本电脑具有全高清 1920x1080 分辨率 我正在此处编写我的项目 当我将主笔记本电脑的分辨率更改为 1280x1024 1280x800 或 1024x768 时 没有问题 我的应
  • git - 服务器主机密钥未缓存

    我尝试将更改从本地存储库推送到远程存储库 当我输入 git push origin 我收到以下错误 The server s host key is not cached in the registry You have no guaran
  • Django - 没有名为 app 的模块

    我一直在尝试让 django 编写的应用程序正常工作 但它根本不工作 我也已经工作了一段时间 它在开发服务器上完美运行 但我无法放入生产环境 apahce 我的项目名称是 apstat 应用程序名称是 basic 我尝试按以下方式访问它 块
  • Python 多处理:同步类文件对象

    我正在尝试创建一个类似对象的文件 该对象在测试期间分配给 sys stdout sys stderr 以提供确定性输出 它并不意味着快速 只是可靠 到目前为止我所拥有的almost有效 但我需要一些帮助来消除最后几个边缘情况错误 这是我当前
  • HQL 意外的 AST 节点::

    我的代码无法注入以下存储库 根据堆栈跟踪 我的 HQL 语法似乎无效 但我不确定我做错了什么 Repository public interface JobSetRepository extends JpaRepository
  • 命令“npm install fs”出现问题

    我不习惯使用 Linux 所以也许这是一个愚蠢的问题 在我正在进行的实验室中 系统要求我运行命令 npm install fs 来读取 写入文件 但这是我遇到的错误 我不知道如何解决它 我也找不到类似的问题 PS 我正在 Ubuntu 17
  • 帮助在 Node.js 中需要 npm 模块

    我觉得我在这里缺少一些非常基本的东西 所以我安装了一个 npm 库npm install somelib 根据我读过的内容 我应该能够简单地做一个 var somelib require somelib 但它找不到任何东西 我确实有一个no
  • Chrome 中的 ScriptManager.RegisterHiddenField

    我正在处理一些利用 ScriptManager RegisterHiddenField 来跟踪数据模型修改的代码 它在 IE 和 FF 中运行良好 但在 Chrome 中遇到问题 如果您添加以下内容 就会出现该问题的一个简单示例 prote
  • 如何获取 ClickOnce 应用程序的文件夹路径

    我需要在控制台 ClickOnce 所在的同一文件夹中写入一个文件 application 可执行文件 驻留 它从中启动的文件夹 我尝试使用Application StartupPath Path GetDirectoryName Asse
  • 在C中缩小文件

    如何用 C 语言缩小文件 例如 如果我打开一个 2mb 的文件 做了一些工作并决定只有 1mb 的文件仍然存在 这是如何完成的 我知道如何使用 write fd 写入文件 但是如果我想在文件中间切出某些部分或截断它怎么办 您可能正在寻找tr
  • 组合多个控件的控件子类

    我正在尝试扩展 TextBox 以在其左侧添加一个标签并将其视为一个控件 这样我就不必跟踪它们的大小 位置等 我创建了一个扩展 Control 并具有 TextBox 和 Label 字段的 TextBoxWithLabel 类 但我不太确
  • BASH_REMATCH 不捕获

    我正在尝试捕获 bash 中路径的一部分 Input Users foo virtualenvs venv test server Code bin zsh regex venv if VIRTUAL ENV regex then echo
  • 将图像插入 MySQL 数据库或从 MySQL 数据库查看图像

    我在数据库中插入图像时遇到问题 该表具有以下结构 id gt INT 3 gt 自动增量 名称 gt VARCHAR 30 扩展名 gt VARCHAR 10 可能太短 img gt 中型BLOB 插入图像的PHP代码是 if FILES
  • 通过滚动移动 DIV

    我正在创建一个 jQuery 滚动条 它滚动 中的内容 这就像jQuery 滚动窗格 http jscrollpane kelvinluck com 我已经到了需要移动滚动按钮的地步 我的问题是 在没有任何 UI 插件的情况下 最好的方法是
  • 如果我加载一个包含 (ns my-namespace) 的文件,为什么它不切换我当前的命名空间?

    我有一个这样的文件 ns boston core If I load boston core 然而 从 REPL 来看 我的 ns 没有改变为boston但仍然存在user 为什么是这样 这是因为 load 只是加载指定的文件 到 bost
  • 从 glm 中提取 p 值

    我正在运行许多回归 并且只对一个特定变量的系数和 p 值的影响感兴趣 因此 在我的脚本中 我希望能够从 glm 摘要中提取 p 值 获取系数本身很容易 我知道查看 p 值的唯一方法是使用 summary myReg 还有其他办法吗 e g
  • 如何检测会话何时结束

    有没有办法检测有人离开您的网站 到目前为止我知道如何使用ignore user abort 但据我所知 这就是了 我需要知道这一点的原因是因为我需要一个脚本来在有人离开网站时执行 在数据库中为每个用户记录一个时间戳 并在每次页面加载时 或通
  • 如何暂时禁用“返回值可能未定义”警告?

    我想在代码中禁用特定警告 W1035 因为我认为编译器对此警告是错误的 function TfrmNagScreen Run TOption begin if ShowModal mrOk then Result TOption rdgAc
  • Bootstrap 3 导航栏链接不起作用

    我有一个带有链接的导航栏 品牌 链接有效 但没有任何内容ul做 我读过关于e preventDefault 当它与 ul nav gt li click function e 我也读过它与z index 我没有发现任何这样的情况 除非我找不