Bootstrap 3导航栏中的所有链接均无效

Question

I have a bootstrap 3 navigation bar on my page, and I want all the links to go to different pages, but none of the links in either the navigation items, or the brand link function. When you hover over each one, it shows the link address in the bottom left hand corner still, but there are no visible changes to the page. Here is my code...

 $(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> 

Is there anything wrong with my code that stops the links working?

Answer 1

Your problem is this code

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

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

You are slecting all the anchor tags inside the navbar and in the click event you are doing event.preventDefault(); which will stop the event and Nothing happens.

I see you are using those functionalities to scroll to content by # code.

So change the selector $(".navbar a, footer a[href='#myPage']") to taget only the required anchor tags which want those defined functionalities.

Answer 2

These two lines in the JavaScript were causing the problem:

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

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

Removing them makes the code work.

 $(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>