Aktuelle Navigation-Text hervorheben

[hakura]

Hallo zusammen,
ich habe wiedermal ein Problem bei dem ich nicht wirklich weiterkomme. Ich lade meine Navigation über JavaScript in meine HTML-Datei ein. Das ist die Struktur der Navigation:

$("#header").html('\
  <div><a href="index.html"><img src="images/Nav/logo.png" width="258" height="75" class="logo"></a>\
    <div class="nav">\
      <ul>\
      <li><a href="/">test1</a></li>\
      <li><a href="Projekte">test2</a></li>\
      <li><a href="Unternehmen">test3</a></li>\
      <li><a href="Jobs">test4</a></li>\
      <li><a href="Events">test5</a></li>\
      <li><a href="Kontakt">test6</a></li>\
      </ul>\
    </div>\
  </div>');

Die Navigation wird perfekt angezeigt, dass ist auch nicht das Problem.
Mein Ziel ist es nun, die Navigation hervorzuheben aber nur die aktuelle gesehene Seite. Dafür wollte ich mit JQuery eine Klasse hinzufügen um mir die Farbe des aktuellen Navigation-Text zu ändern. Leider habe ich nach vielen Versuchen noch keine Lösung gefunden.
Hier ist der CSS-Code:

.header {
    z-index: 900;
    position: fixed;
    background-image: url(../images/Nav/img_menu_bar_1.png);
    width: 100%;
    height: auto;
    padding-left: 50px;
    top: -1px;
}

.nav {
    float: right;
    margin-right: 90px; /*110*/
    padding-top: 12px;
}
.logo {
    padding-top: 0px;
}
.nav li {
    display: inline-block;
    margin-right: 15px;
    font-size: 20px;
}
.nav ul li{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    line-height: 26px;
    font-family: Helvetica, sans-serif;
}
.nav li:hover{
    color: #94C83E;
}
.check{
    color: #94C83E;
}

Diese JQuery Funktionen habe ich bereits probiert, ohne Erfolg:

$(document).on('click', 'nav ul li a', function() {
$(".check").removeClass("check");
$(".check").addClass(".check");
});

$(document).on('click', 'nav ul li a', function() {
$(".nav ul li").css{("color":"red")};
$(".nav ul li").css{("color":"green")};
});

Kann es sein das es nicht funktioniert weil die Navigation von JavaScript geladen wird? Was gibt es für Möglichkeiten dieses Problem einfach zu lösen?
Vielen Dank

 

[Chronos]

Ich hab jetzt nicht mega viel Zeit zu gucken aber es kann sein, da dein li ja schon inline-block hat und du ja deinen Listener auf das a-Element setzt. Sprich du klickst auf das li-Element nicht auf das a-Element...
Kann sein dass das quatsch ist, aber ich muss zum Zug (ich editiere das ggf. später).

Edit 1: besseres Deutsch in meinem Post.
Edit 2:

- Mein Post vor dem Edit war mehr oder weniger quatsch.
- In deinem CSS ist "header" eine Klasse, in deinem JS eine ID
- Wenn du nur eine Eigenschaft ändern willst dann würde ich das eher so schreiben:

  $(".nav ul li").css("color", "red");

http://www.w3schools.com/jquery/jquery_css.asp
oder eben gleich toggleClass() nehmen:
https://api.jquery.com/toggleClass/

- So wie ich das verstanden habe, möchtest du beim klick auf einen der Links eine neue seite öffnen oder?
Wenn ja, dann setzt in der neuen Seite dann einfach eine Klasse in dem Link also z. B.:

<li class="active-tab"><a href="/">test1</a></li>\

auf der zweiten Seite

  <li><a href="/">test1</a></li>\
  <li class="active-tab"><a href="Projekte">test2</a></li>\

usw.

So wie du es jetzt machst, öffnest du ja eine neue Seite und lädst dann direkt wieder das Gerüst ohne besonderen Style.

Ich hoffe, ich habe deinen Post richtig verstanden und konnte dir bissl helfen.

Edit 3: oder wie das von Tronjer

 

[Tronjer]

Ich verstehe den Ansatz nicht. Welchen Zweck sollte es haben, eine Navigation per JS als innerHTML zuzuweisen, wenn die Seite ohnehin vom Server ausgeliefert wird, und auch die unteren beiden Funktionen sind sinnfrei.

Du willst doch wahrscheinlich den zur aktuellen Seite zugehörigen Link hervorheben, und dazu sollte eine Korrespondenz zwischen der URL und dem entsprechen Anker hergestellt werden.

Also angenommen, die Unterseite heißt http://meine-domain.de/jobs.html und der dazugehörige Link <a href="Jobs">, dann würde ich das 'jobs' aus der URL filtern

var unterseite = window.location.pathname.split('/');
unterseite = unterseite[1].split('.');
unterseite = unterseite[0];

anschließend über die Anker iterieren, dort die Links herausziehen, diese mit der Variable vergleichen und bei true ein addClass() ausführen.

$('nav ul li a').each(function(i) {
  var link = $(this).attr('href');
  link = link.toLowerCase();

  if (link == unterseite) {
    $(this).addClass('meineKlasse');
  }
});

Das ist jetzt ungetestet und soll nur als Pattern dienen.

 

[Gilles]

Unterstützt dein Webserver denn keine serverseitigen Sprachen, bzw beherrschst du keine?
Denn das Nachladen einer Navigation würde ich nicht empfehlen. Maximal das nachladen von Inhalten wenn du auf ein Menu Item drückst.

 

[hakura]

Ja ich möchte einfach einmal die Navigation definieren und dann die aktive Seite in der Navigation hervorheben.
Ich habe die Navigation in JS gemacht weil ich kein PHP nutzen wollte. Aber ich denke PHP wäre da die beste Möglichkeit.

EDIT - Ich werde die Navigation jetzt über PHP einbinden. Dann werde ich mit JQuery eine "aktive"-Klasse hinzufügen bei der jeweils ausgewählten Verlinkung der Navigation.

Edit#2 - Das mit dem hervorheben check ich noch nicht so ganz.

EDIT#3 - Ich habe das ganze nun mit PHP Realisiert. Ich habe die Navigation mit PHP einmal definiert und included:

  <div><a href="index.php"><img src="images/Nav/logo.png" width="258" height="75" class="logo"></a>
    <div class="nav">
      <ul>
      <a href="index.php"><li>Home</li></a>
//..
      <a href="Jobs.php"><li>Jobs</li></a>
      <a href="Events.php"><li>Events</li></a>
      </ul>
    </div>
  </div>

Nun krieg ich das hervorheben der aktuellen Seite noch nicht hin. Ich werde heute Abend nochmals Zeit darin investieren.

 

[hakura]

Hat sich erledigt ich habe es ganz einfach mit CSS gemacht.
Ich habe dem <body> der Seite eine ID vergeben und der Navigation <li> eine andere ID. Dann habe ich das so im CSS geschrieben:
#bodyid #navid { color: # }