Bootstrap 3导航栏中没有任何链接正常工作

Question

我的页面上有一个bootstrap 3导航栏，我希望所有链接都转到不同的页面，但导航项目或品牌链接功能都没有链接。当您将鼠标悬停在每个上方时，它会在左下角显示链接地址，但页面没有可见的更改。这是我的代码......

$(document).ready(function() {
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 900, function() {

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  });

  $(window).scroll(function() {
    $(".slideanim").each(function() {
      var pos = $(this).offset().top;

      var winTop = $(window).scrollTop();
      if (pos < winTop + 600) {
        $(this).addClass("slide");
      }
    });
  });
})

@import url('https://fonts.googleapis.com/css?family=Dosis');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
 #logo {
  animation: slide-in 1s 1;
}
@keyframes slide-in {
  0% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes slide-in {
  0% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0px);
    transform: rotate(0deg);
  }
}
footer {
  background-color: black;
}
.modal-dialog {
  padding-top: 50%;
}
.html {
  background-color: red;
  border-color: crimson;
}
.scratch {
  background-color: orange;
  border-color: darkorange;
}
.python {
  background-color: green;
  border-color: darkgreen;
}
.kodu {
  background-color: turquoise;
  border-color: darkseagreen;
}
.mswlogo {
  background-color: white;
  border-color: red;
}
.esafety {
  background-color: yellow;
  border-color: blue;
}
.biggest {
  width: 100%;
}
#comingSoon {
  top: 100px;
}
#how {
  top: 100px;
}
.center {
  text-align: center;
  vertical-align: middle;
}
.box {
  border-radius: 5px;
  border-style: solid;
  border-width: thick;
  height: 390px;
}
.box:hover {
  box-shadow: 10px 10px 5px #888888;
  cursor: pointer;
}
.full {
  height: 200px;
}
body {
  font: 400 15px'Raleway', sans-serif;
  line-height: 1.8;
  color: #818181;
}
h2 {
  font-size: 24px;
  text-transform: uppercase;
  color: #303030;
  font-weight: 600;
  margin-bottom: 30px;
}
h4 {
  font-size: 19px;
  line-height: 1.375em;
  color: #303030;
  font-weight: 400;
  margin-bottom: 30px;
}
.jumbotron {
  background-color: #3399ff;
  color: #fff;
  padding: 100px 25px;
  font-family: 'Dosis', sans-serif;
}
.container-fluid {
  padding: 60px 50px;
}
.bg-grey {
  background-color: #f6f6f6;
}
.logo-small {
  color: #3399ff;
  font-size: 50px;
}
.logo {
  color: #3399ff;
  font-size: 200px;
}
.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
.carousel-control.right,
.carousel-control.left {
  background-image: none;
  color: #3399ff;
}
.carousel-indicators li {
  border-color: #3399ff;
}
.carousel-indicators li.active {
  background-color: #3399ff;
}
.item h4 {
  font-size: 19px;
  line-height: 1.375em;
  font-weight: 400;
  font-style: italic;
  margin: 70px 0;
}
.item span {
  font-style: normal;
}
.panel {
  border: #3399ff solid 1px;
  border-radius: 0 !important;
  transition: box-shadow 0.5s;
}
.panel:hover {
  box-shadow: 5px 0 40px rgba(0, 0, 0, 0.2);
}
.panel-footer .btn:hover {
  border: #3399ff solid 1px;
  background-color: #fff !important;
  color: #3399ff;
}
.panel-heading {
  color: #fff !important;
  background-color: #3399ff !important;
  padding: 25px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.panel-footer {
  background-color: white !important;
}
.panel-footer h3 {
  font-size: 32px;
}
.panel-footer h4 {
  color: #aaa;
  font-size: 14px;
}
.panel-footer .btn {
  margin: 15px 0;
  background-color: #3399ff;
  color: #fff;
}
.navbar {
  margin-bottom: 0;
  background-color: #3399ff;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}
.navbar li a,
.navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #3399ff !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
.navbar-brand {
  margin-top: 2px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 2px;
  padding-left: 0;
}
.navbar-nav li a {
  line-height: 34px;
  vertical-align: middle;
}
footer .glyphicon {
  font-size: 20px;
  margin-bottom: 20px;
  color: #3399ff;
}
.slideanim {
  visibility: hidden;
}
.slide {
  animation-name: slide;
  animation-duration: 1s;
  visibility: visible;
}
@keyframes slide {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .col-sm-4 {
    text-align: center;
    margin: 25px 0;
  }
  .btn-lg {
    width: 100%;
    margin-bottom: 35px;
  }
}
@media screen and (max-width: 480px) {
  .logo {
    font-size: 150px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Coding Kids - The smart way to learn coding</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../../../css/main.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="../../../../js/main.js"></script>
</head>

<body id="top">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="http://www.coding-kids.net">
          <img id="logo" src="logo.png" height="50" alt="Coding Kids Logo">
        </a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="http://www.coding-kids.net"><i class="fa fa-home"></i> HOME</a>
          </li>
          <li><a href="http://www.coding-kids.net/#tutorials"><i class="fa fa-code"></i> TUTORIALS</a>
          </li>
          <li><a href="https://groups.google.com/forum/embed/?place=forum/ask-codey&showsearch=true&showpopout=true&showtabs=false"><i class="fa fa-question-circle"></i> ASK CODEY</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div>
    {tag_pagecontent}
  </div>
  <!-- Coming Soon Modal -->
  <div id="comingSoon" class="modal fade" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Coming Soon</h4>
      </div>
      <div class="modal-body">
        <p>This feature is coming soon. To keep updated on it's progress, join our mailing list.</p>
      </div>
      <div class="modal-footer">
        <a class="btn btn-primary" href="http://coding-kids.us11.list-manage.com/subscribe?u=65075c11e380e089f2db58b85&id=fd936fe31d">Join</a>
      </div>
    </div>
  </div>
  <!-- How I made this website Modal -->
  <div id="how" class="modal fade" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">How I made this website</h4>
      </div>
      <div class="modal-body">
        <p>To make Coding Kids, I first planned out what the different sections of it would be. I wrote the content to go in those sections, and typed it up. I then styled my website around that plain text. I use two frameworks in my website. Frameworks
          are libraries of code that you can use to make your website have more functionality or look nicer. They also reduce the chance that your code has bugs in it. I used two frameworks: one called jQuery which is written in JavaScript, and one called
          Bootstrap, which is written in CSS.</p>
        <p>The web hosting company that I used is called Adobe Business Catalyst. It lets you include all kinds of cool features in your websites, like forums, blogs, or login areas. I used some of these in my website, like for the 'Ask Codey' section.</p>
        <p>So, now that you know how I made my website, start making yours! Visit our HTML tutorial to learn how.</p>
        <p>Happy Coding!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  <footer class="container-fluid text-center">
    <a href="#top" title="To Top">
      <span class="glyphicon glyphicon-chevron-up"></span>
    </a>
    <p>Copyright &copy; Coding Kids 2016</p>
    <p><a data-toggle="modal" data-target="#how" title="How?">How I made this website</a>
    </p>
  </footer>
</body>

</html>

我的代码是否有任何问题导致链接停止工作？

Answer 1

您的问题是此代码

 $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

// Prevent default anchor click behavior
event.preventDefault();

您正在选择navbar内的所有锚标记以及您正在执行的点击事件event.preventDefault();，这将停止事件并且什么都不会发生。

我发现你正在使用这些功能通过#code滚动到内容。

因此，请将选择器$(".navbar a, footer a[href='#myPage']")更改为仅适用于需要这些已定义功能的锚标记。

Answer 2

JavaScript中的这两行引起了问题：

   $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

        // Prevent default anchor click behavior
        event.preventDefault();

删除它们会使代码生效。

$(document).ready(function() {
// Add smooth scrolling to all links in navbar + footer link
   

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 900, function() {

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  });

  $(window).scroll(function() {
    $(".slideanim").each(function() {
      var pos = $(this).offset().top;

      var winTop = $(window).scrollTop();
      if (pos < winTop + 600) {
        $(this).addClass("slide");
      }
    });
  });
  
})

@import url('https://fonts.googleapis.com/css?family=Dosis');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
 #logo {
  animation: slide-in 1s 1;
}
@keyframes slide-in {
  0% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes slide-in {
  0% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0px);
    transform: rotate(0deg);
  }
}
footer {
  background-color: black;
}
.modal-dialog {
  padding-top: 50%;
}
.html {
  background-color: red;
  border-color: crimson;
}
.scratch {
  background-color: orange;
  border-color: darkorange;
}
.python {
  background-color: green;
  border-color: darkgreen;
}
.kodu {
  background-color: turquoise;
  border-color: darkseagreen;
}
.mswlogo {
  background-color: white;
  border-color: red;
}
.esafety {
  background-color: yellow;
  border-color: blue;
}
.biggest {
  width: 100%;
}
#comingSoon {
  top: 100px;
}
#how {
  top: 100px;
}
.center {
  text-align: center;
  vertical-align: middle;
}
.box {
  border-radius: 5px;
  border-style: solid;
  border-width: thick;
  height: 390px;
}
.box:hover {
  box-shadow: 10px 10px 5px #888888;
  cursor: pointer;
}
.full {
  height: 200px;
}
body {
  font: 400 15px'Raleway', sans-serif;
  line-height: 1.8;
  color: #818181;
}
h2 {
  font-size: 24px;
  text-transform: uppercase;
  color: #303030;
  font-weight: 600;
  margin-bottom: 30px;
}
h4 {
  font-size: 19px;
  line-height: 1.375em;
  color: #303030;
  font-weight: 400;
  margin-bottom: 30px;
}
.jumbotron {
  background-color: #3399ff;
  color: #fff;
  padding: 100px 25px;
  font-family: 'Dosis', sans-serif;
}
.container-fluid {
  padding: 60px 50px;
}
.bg-grey {
  background-color: #f6f6f6;
}
.logo-small {
  color: #3399ff;
  font-size: 50px;
}
.logo {
  color: #3399ff;
  font-size: 200px;
}
.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
.carousel-control.right,
.carousel-control.left {
  background-image: none;
  color: #3399ff;
}
.carousel-indicators li {
  border-color: #3399ff;
}
.carousel-indicators li.active {
  background-color: #3399ff;
}
.item h4 {
  font-size: 19px;
  line-height: 1.375em;
  font-weight: 400;
  font-style: italic;
  margin: 70px 0;
}
.item span {
  font-style: normal;
}
.panel {
  border: #3399ff solid 1px;
  border-radius: 0 !important;
  transition: box-shadow 0.5s;
}
.panel:hover {
  box-shadow: 5px 0 40px rgba(0, 0, 0, 0.2);
}
.panel-footer .btn:hover {
  border: #3399ff solid 1px;
  background-color: #fff !important;
  color: #3399ff;
}
.panel-heading {
  color: #fff !important;
  background-color: #3399ff !important;
  padding: 25px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.panel-footer {
  background-color: white !important;
}
.panel-footer h3 {
  font-size: 32px;
}
.panel-footer h4 {
  color: #aaa;
  font-size: 14px;
}
.panel-footer .btn {
  margin: 15px 0;
  background-color: #3399ff;
  color: #fff;
}
.navbar {
  margin-bottom: 0;
  background-color: #3399ff;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}
.navbar li a,
.navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #3399ff !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
.navbar-brand {
  margin-top: 2px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 2px;
  padding-left: 0;
}
.navbar-nav li a {
  line-height: 34px;
  vertical-align: middle;
}
footer .glyphicon {
  font-size: 20px;
  margin-bottom: 20px;
  color: #3399ff;
}
.slideanim {
  visibility: hidden;
}
.slide {
  animation-name: slide;
  animation-duration: 1s;
  visibility: visible;
}
@keyframes slide {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .col-sm-4 {
    text-align: center;
    margin: 25px 0;
  }
  .btn-lg {
    width: 100%;
    margin-bottom: 35px;
  }
}
@media screen and (max-width: 480px) {
  .logo {
    font-size: 150px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Coding Kids - The smart way to learn coding</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../../../css/main.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="../../../../js/main.js"></script>
</head>

<body id="top">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="http://www.coding-kids.net">
          <img id="logo" src="logo.png" height="50" alt="Coding Kids Logo">
        </a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="http://www.coding-kids.net"><i class="fa fa-home"></i> HOME</a>
          </li>
          <li><a href="http://www.coding-kids.net/#tutorials"><i class="fa fa-code"></i> TUTORIALS</a>
          </li>
          <li><a href="https://groups.google.com/forum/embed/?place=forum/ask-codey&showsearch=true&showpopout=true&showtabs=false"><i class="fa fa-question-circle"></i> ASK CODEY</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div>
    {tag_pagecontent}
  </div>
  <!-- Coming Soon Modal -->
  <div id="comingSoon" class="modal fade" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Coming Soon</h4>
      </div>
      <div class="modal-body">
        <p>This feature is coming soon. To keep updated on it's progress, join our mailing list.</p>
      </div>
      <div class="modal-footer">
        <a class="btn btn-primary" href="http://coding-kids.us11.list-manage.com/subscribe?u=65075c11e380e089f2db58b85&id=fd936fe31d">Join</a>
      </div>
    </div>
  </div>
  <!-- How I made this website Modal -->
  <div id="how" class="modal fade" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">How I made this website</h4>
      </div>
      <div class="modal-body">
        <p>To make Coding Kids, I first planned out what the different sections of it would be. I wrote the content to go in those sections, and typed it up. I then styled my website around that plain text. I use two frameworks in my website. Frameworks
          are libraries of code that you can use to make your website have more functionality or look nicer. They also reduce the chance that your code has bugs in it. I used two frameworks: one called jQuery which is written in JavaScript, and one called
          Bootstrap, which is written in CSS.</p>
        <p>The web hosting company that I used is called Adobe Business Catalyst. It lets you include all kinds of cool features in your websites, like forums, blogs, or login areas. I used some of these in my website, like for the 'Ask Codey' section.</p>
        <p>So, now that you know how I made my website, start making yours! Visit our HTML tutorial to learn how.</p>
        <p>Happy Coding!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  <footer class="container-fluid text-center">
    <a href="#top" title="To Top">
      <span class="glyphicon glyphicon-chevron-up"></span>
    </a>
    <p>Copyright &copy; Coding Kids 2016</p>
    <p><a data-toggle="modal" data-target="#how" title="How?">How I made this website</a>
    </p>
  </footer>
</body>

</html>