Navbar in header.php

didi577 · 21. Oktober 2019

Hi.

Ich möchte erreichen das das selektierte item in der navbar (Bootstrap) farblich gekennzeichnet ist.
dafür habe ich eine Methode in javascript

ich habe die navbar in der header.php

die header.php wird bei jedem Seitenaufruf geladen

dadurch wird die navbar auch jedes mal neu geladen und ich glaube daher wird das selektierte item nicht farblich gekennzeichnet

wie löse ich das Problem?

Grüße

basti1012 · 22. Oktober 2019

hast du eine Link zu der Seite ?

Wenn ich dich richtige verstehe willst du den item nee Farbe geben auf der Seite du gerade bist ?

Ich weiß nicht wie das bei Bootstrap geregelt ist , aber wenn du den item eine andere Klasse gibst dann kannst du den natürlich anders gestallten

didi577 · 22. Oktober 2019

einen Link habe ich nicht da ich noch lokal arbeite

hier ist meine header.php mit der navbar:

HTML

<!doctype html>
<html lang="de">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <!-- dataTables CSS -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <!-- Mein CSS -->
  <link rel="stylesheet" href="../css/custom.css">

  <title>Ticketauswertung</title>

</head>
  <body>

    <nav class="navbar navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="index.php">TecArt Ticketauswertung</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto text-center">
          <li class="nav-item active">
            <a class="nav-link" href="index.php">Startseite <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Eingang</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="seite1.php">Offen</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Status</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Kunden</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Mitarbeiter</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Kennzahlen
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Eingang je Quartal</a>
            </div>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Menü
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Login</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  <br><br>
  <div class="container-fluid" style="margin-top: 45px; padding-right: 30px;">

Alles anzeigen

hier das css:

Code

.navbar-dark .nav-item > .nav-link.active  {
    color:white;
}

und hier die javascript:

Code

$('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
})

wenn ich auf der Seite ein nav-item klicke z.B. "Offen" wird es kurz aktiv angezeigt und dann wird wieder "Startseite" als aktiv angezeigt obwohl die Seite hinter "Offen" geladen wurde

wo kann der Fehler sein?

Navbar in header.php

Jetzt mitmachen!

Teilen