Bootstrap導航欄鏈接不起作用
[英]Bootstrap navbar links don't work
問題描述
我的朋友們讓我為他們的制作公司建立一個網站，我一直在努力，但由於我不是一個專業的網頁設計師，我遇到了一些問題。 我通過自定義我在網上找到的模板在這個網站上工作過。 但是，我遇到了一個問題，盡管我在這里和其他幾個網站上搜索，但我似乎無法解決這個問題。 單擊時，導航欄中的鏈接不起作用。 我希望有人可以看看，看看他們是否有任何建議。 該網站可以在這里找到。
這是我的索引HTML文件 -
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="robots" content="all,follow"> <meta name="googlebot" content="index,follow,snippet,archive"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Great Red Spot Productions | New Orleans, LA</title> <meta name="keywords" content=""> <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100' rel='stylesheet' type='text/css'> <!-- Bootstrap and Font Awesome css --> <link href="css/font-awesome.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Theme stylesheet --> <link href="css/style.default.css" rel="stylesheet" id="theme-stylesheet"> <!-- Custom stylesheet - for your changes --> <link href="css/custom.css" rel="stylesheet"> <!-- owl carousel css --> <link href="css/owl.carousel.css" rel="stylesheet"> <link href="css/owl.theme.css" rel="stylesheet"> <!-- CSS Animations --> <link href="css/animate.css" rel="stylesheet"> <!-- Favicon --> <link rel="shortcut icon" href="favicon.png"> <!-- Mordernizr --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- Responsivity for older IE --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body data-spy="scroll" data-target="#navigation" data-offset="120"> <!-- *** NAVBAR *** _________________________________________________________ --> <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse" id="navigation"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="index.html">Home</a> </li> <li><a href="about.html">About Us</a> </li> <li><a href="services.html">Services</a> </li> <li><a href="portfolio.html">Portfolio</a> </li> <li><a href="blog.html">Blog</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </div> <!--/.nav-collapse --> </div> </div> <!-- /#navbar --> <!-- *** NAVBAR END *** --> <div id="all"> <!-- *** INTRO IMAGE *** _________________________________________________________ --> <div id="intro" class="clearfix"> <div class="item"> <div class="container"> <div class="row"> <div class="carousel-caption"> <span class="pull-left"><h1 data-animate="fadeInDown">Great Red Spot Productions</h1><span> </div> </div> </div> </div> </div> <!-- *** INTRO IMAGE END *** --> <!-- /#all --> <!-- #### JAVASCRIPT FILES ### --> <!-- js base --> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- for demo purpose --> <script src="js/jquery.cookie.js"></script> <!-- waypoints for scroll spy --> <script src="js/waypoints.min.js"></script> <!-- maps --> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/gmaps.js"></script> <!-- masonry layout --> <script src="js/masonry.pkgd.min.js"></script> <!-- owl carousel --> <script src="js/owl.carousel.min.js"></script> <!-- jQuery scroll to --> <script src="js/jquery.scrollTo.min.js"></script> <!-- jQuery counter --> <script src="js/jquery.counterup.min.js"></script> <!-- jQuery parallax --> <script src="js/jquery.parallax-1.1.3.js"></script> <!-- main js file --> <script src="js/front.js"></script> </body> </html>
我不確定其他文件是否需要幫助，如果您需要任何其他信息，請告訴我。
3 個解決方案
解決方案1
3 2016-10-24 17:24:24
你的javascript中有錯誤。打開你可以查看的開發人員工具。這些錯誤可能會阻止鏈接運行。
解決方案2
0 2016-10-24 17:39:12
問題是你的jquery。請使用最新的jquery版本3.1.1，它可以幫助你，並在你的代碼的正確位置定義它們。下載引導程序並在你的html頁面中設置它。
解決方案3
0 2016-10-24 17:39:22
看起來你使用的教程/示例鏈接滾動到它引用的部分。 我們可以看到這種情況，因為當我們點擊鏈接時，錯誤來自jquery.scrollTo.min.js。
每次單擊菜單項時都必須調用一個函數。 這可以是您的索引文件中的內聯，也可以是您包含的許多js文件之一。
一種調試方法是注釋掉包含的js文件，直到鏈接正確，這應該工作，因為當頁面上的javascript被關閉鏈接工作正常。
祝好運！
Bootstrap 5 導航欄下拉鏈接在 <576px 的小屏幕上不起作用
[英]Bootstrap 5 navbar dropdown links don't work on small screens <576px
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.