Menüschaltfläche aktiv, wenn geklickt wird

Ich möchte meine Schaltflächen in der Menüleiste aktivieren, wenn sie geklickt werden. Das funktioniert auch gut: Portfolio, Über, Kontakt.Menüschaltfläche aktiv, wenn geklickt wird

Aber das kleine Skript arbeitet nicht an Index und Diensten. Ich habe auf jeder Seite ein Body-Tag gesetzt.

Hat jemand eine Ahnung, was hier falsch sein könnte? Es ist der exakt gleiche Code.

services.php

<?php include 'resources/includes/header.php' ?> 

<body id="services"> 

<?php include 'resources/includes/navbar.php' ?> 

<!-- start intro section --> 
<section class="intro"> 
    <div class="container"> 
     <div class="row"> 

      <div class="col-md-12 text-center"> 
       <div class="intro-content"> 
        <h1>My services are <strong>focused </strong>primarily </h1> 
        <h2>in design, coding and marketing automation </h2> 


       </div> 
      </div> 
     </div> 
    </div> 
</section>

navbar.php:

<!-- begin header section --> 
<header class="header"> 

    <!-- begin nav --> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 

        <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>Tap me!</span> 
         </button> 
         <!-- begin logo in navigation --> 
         <a class="navbar-brand" href="index.php"> 
           <img src="images/graphic/webdesign.png"> 
         </a> 
         <!-- end logo in navigation --> 
        </div> 

        <div class="navbar-collapse collapse"> 
         <ul class="nav nav-pills nav-main pull-right"> 

          <!-- begin navigation items --> 
          <li> 
           <a href="index.php">Index</a> 
          </li> 
          <li> 
           <a href="services.php">Services</a> 
          </li> 
          <li> 
           <a href="portfolio.php">Portfolio</a> 
          </li> 
          <li> 
           <a href="aboutme.php">About Me</a> 
          </li> 
          <li> 
           <a href="contact.php">Contact</a> 
          </li> 
          <!-- end navigation items --> 
         </ul> 
        </div> 

       </div> 
      </div> 
     </div> 
    </nav> 
    <!-- end nav --> 

</header

Javascript $ (function() {

//highlight the current nav 
    $("#index a:contains('Index')").parent().addClass('active'); 
    $("#services a:contains('Services')").parent().addClass('active'); 
    $("#portfolio a:contains('Portfolio')").parent().addClass('active'); 
    $("#about a:contains('About Me')").parent().addClass('active'); 
    $("#contact a:contains('Contact')").parent().addClass('active'); 
});

Quelle

2016-09-02 McDuck4

keine Antwort (wie Robert bereits vorgesehen) jedoch würde ich empfehlen Sie dieses Skript in Ihrem PHP implementieren, indem überprüft, was die aktuelle URL ist und die aktive Klasse anwenden. Auf diese Weise ist es nicht abhängig von der Aktualisierung Ihres Skripts für jedes Mal, wenn Sie eine neue Seite und deren Instant hinzufügen - und nicht darauf warten, dass das Skript geladen und ausgeführt wird. –

Vielen Dank für Ihren Kommentar. Wenn ich zwischen den Seiten wechsle, erscheint eine weiße, leere Seite. Ist das, weil ich die Menüoption so aktiv habe, oder könnte es etwas anderes sein. Ich habe meine Kopfzeile, Navbar und Fußzeile in getrennten PHP-Dokumenten enthalten. – McDuck4

PHP wird von der Serverseite ausgeführt, so dass es das Dokument vor dem Senden an den Browser aufbaut (das ist gut, weil Sie alles haben, was Ihre Seite beim Laden benötigt). Ihr Problem besteht darin, dass Ihr Javascript ausgeführt wird, nachdem die Seite vollständig geladen wurde. Da Ihr Hintergrund in js gesteuert wird, verursacht es etwas, das als Flash von unsterilisiertem Inhalt bezeichnet wird. Um dies zu reduzieren, können Sie einen Build-Schritt verwenden, der all Ihre JS- und CSS-Dateien in eine minimierte Datei zusammenfasst und einige Basis-CSS bereitstellt, um den Übergang weniger sichtbar zu machen - z. –

Ihnen fehlt das Skript navbar.js auf diesen beiden Seiten. Es ist unterhalb von main.js auf denen, die funktionieren.

<!-- Custom Javascript --> 
<script src="js/main.js"></script> 
<script src="js/navbar.js"></script> // <-- missing from index and services

Quelle

2016-09-02 11:07:37

Ich könnte auch empfehlen, dass ein Templating-System wie Twig in Situationen wie diesem wirklich helfen kann, wo Sie gemeinsame Dinge über Ansichten hinweg teilen. –

Shoot, wie die .... könnte ich das vermissen. Vielen Dank. – McDuck4

Menüschaltfläche aktiv, wenn geklickt wird

Antwort

Verwandte Themen