个人中心
gpt4 book ai didi

javascript - Bootstrap 3 导航栏链接不起作用

转载 作者：太空狗 更新时间：2023-10-29 15:49:40 25 4
gpt4 key购买 nike

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

这可能是什么原因造成的？

我不确定它是否会在 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/)时，它说，“如果调用此方法，将不会触发事件的默认操作。”。所以看起来可能是这种情况，但我不确定如何解决它。

最佳答案

我遇到了由 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 - Bootstrap 3 导航栏链接不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28554349/

25 4 0
文章推荐： html - 无方案 URL 在 HTTP 中有效吗？
文章推荐： android - 更新 ListView 后 "refresh"和 "setSelection"的更好方法(android)
文章推荐： android - 如何在单击 android 中的按钮时更新微调器值？
文章推荐： c - hashlife alg 如何在 Golly 永远持续下去？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com