Question

我的朋友们让我为他们的制作公司建立一个网站，我一直在努力，但由于我不是一个专业的网页设计师，我遇到了一些问题。我通过自定义我在网上找到的模板在这个网站上工作过。但是，我遇到了一个问题，即使在这里和其他几个网站上搜索，我也无法解决这个问题。单击时，导航栏中的链接不起作用。我希望有人可以看一看，看看他们是否有任何建议。该网站可以找到here。

这是我的索引HTML文件 -

＆＃13;

<!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&amp;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>

＆＃13;

我不确定其他文件是否需要帮助，如果您需要任何其他信息，请告诉我们。

Answer 1

您的javascript中存在错误。打开可以查看的开发人员工具。这些错误可能会阻止链接运行。

Answer 2

问题是你的jquery。请使用最新的jquery版本3.1.1，它可以帮助你，并在你的代码的正确位置定义它们。下载引导程序并在你的html页面中设置它。

Answer 3

看起来您使用的教程/示例将链接滚动到它引用的部分。我们可以看到这种情况，因为当我们点击链接时，错误来自jquery.scrollTo.min.js。

每次单击菜单项时都必须调用一个函数。这可以是您的索引文件中的内联，也可以是您包含的许多js文件之一。

一种调试方法是注释掉包含的js文件，直到链接正确，这应该可以正常工作，因为当页面上的javascript被关闭时链接工作正常。

祝你好运！

Bootstrap导航栏链接不起作用

3 个答案: