Bootstrap navbar Links funktionieren nicht

Meine Freunde haben mich gebeten, eine Website für ihre Produktionsfirma zu erstellen, an der ich gearbeitet habe, aber da ich kein professioneller Webdesigner bin, bin ich auf einige Probleme gestoßen. Ich habe auf dieser Website gearbeitet, indem ich eine Vorlage angepasst habe, die ich online gefunden habe. Ich bin jedoch auf ein Problem gestoßen, das ich anscheinend nicht beheben kann, obwohl ich hier und auf mehreren anderen Seiten gesucht habe. Die Links in der Navigationsleiste funktionieren nicht, wenn Sie darauf klicken. Ich hatte gehofft, dass jemand einen Blick darauf werfen könnte, ob sie irgendwelche Vorschläge haben. Die Seite kann here gefunden werden.Bootstrap navbar Links funktionieren nicht

Dies ist mein Index HTML datei

<!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>

Ich bin mir nicht sicher, was andere Dateien für die Hilfe nötig wäre, lassen Sie es mich wissen, wenn Sie andere Informationen benötigen.

Quelle

2016-10-24 Kathryn

Hallo und willkommen zu Stack Overflow. Haben Sie einen Code zu Ihrer Frage hinzuzufügen? –

Hallo, tut mir leid, ich habe versehentlich ohne den Code eingegeben. Danke, dass du mich erinnert hast! – Kathryn

Wenn ich die Seite öffne, erhalte ich Script Errors. 'Kann die Eigenschaft 'slice' von undefined oder null reference nicht bekommen. Dies könnte zu dem vorliegenden Problem beitragen. Hast du eines der Javascript geschrieben, oder war es schon für dich gemacht? –

Es gibt Fehler in Ihrem Javascript. Öffnen Sie die Entwickler-Tools, die Sie anzeigen können. Diese Fehler verhindern möglicherweise, dass Links funktionieren.

Quelle

2016-10-24 17:24:24 XYZ

Ich sah die gleichen Fehler, aber ich habe keine Ahnung, was ich dagegen tun kann, ich weiß nichts über Javascript. Ich versuche das nur anhand einer Vorlage. Ich verstehe nicht, warum all diese Dinge passieren. :/ – Kathryn

Jquery.scrollTo ist ein jquery plugin.irgendwo in Ihrem Code haben Sie diese scrollTo.try verwendet, um das zu finden. https://github.com/boena/jquery.scrollTo Wenn Sie dieses Plugin nicht benötigen, entfernen Sie es.Andernfalls beheben Sie das Problem damit.Es könnte sein, dass Sie beim Entfernen der ID oder Klasse von anchor tag.try das – XYZ

gelöscht haben, das ich komplett entfernt habe nur da, weil es in der Vorlage enthalten war. Das Problem ist immer noch passiert! – Kathryn

Das Problem ist Ihre jquery.Please Nutzung der neuesten Version 3.1.1 jquery, es kann Ihnen helfen und sie an der richtigen Stelle Ihres code.Download Bootstrap definieren und setzen in Ihrem HTML-Seite.

Quelle

2016-10-24 17:39:12

Wenn ich es in Version 3.1.1 ändere, wird der Text auf der Indexseite nicht mehr angezeigt. – Kathryn

Es sieht so aus, als ob das Tutorial/Beispiel, das Sie verwendet haben, die Links zu dem Abschnitt gelenkt hat, auf den es sich bezieht. Wir können sehen, dass dies der Fall ist, wenn wir auf einen Link klicken, kommt der Fehler von jquery.scrollTo.min.js.

Es muss eine Funktion geben, die jedes Mal aufgerufen wird, wenn Sie auf die Menüelemente klicken. Dies wäre entweder in der Indexdatei oder in einer der vielen js-Dateien, die Sie eingebunden haben.

Eine Debug-Methode wäre es, js-Dateien auskommentiert, bis die Links korrekt enthalten sind, sollte dies funktionieren, wenn Javascript auf der Seite deaktiviert ist funktionieren die Links ganz gut.

Viel Glück!

Quelle

2016-10-24 17:39:22

Bootstrap navbar Links funktionieren nicht

Antwort

Verwandte Themen