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>