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栏中选择所有锚标记，并在click事件中执行event.preventDefault(); ;。 这将停止事件，并且不会发生任何事情。

我看到您正在使用这些功能通过＃代码滚动到内容。

因此，将选择器$(".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>