Frage Aktuelle Seite hervorheben - AJAX

pipolo100 · 17 Januar 2016

Hallo,

Habe folgende Fragen:

1. Wie kann ich die Seite, auf der ich mich gerade befinde, farblich in der Navigation hervorheben?
Benutze auf meiner Seite AJAX um die Inhalte dynamisch zu laden.

2. Wenn ich die Seite aktualisiere (F5), werde ich immer auf die Startseite geworfen (bzw. die index.html wird geladen). Gibt es eine Möglichkeit, beim Aktualisieren auf der Seite zu bleiben, auf der ich mich gerade befinde?

Hier die Seite: www.top-web-leasing.de/betatest/marcel

Hier die index.html:

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" media="all" />
<link href="css/lightbox.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<title>Marcel</title>
<script type="text/javascript">
    $(document).ready(function(){
        $("#m_home").click(function() {
            $("#cLeft").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
                $("#cLeft").load("home.html", function() {
                    $("#cLeft").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
               
                });
           
            });
       
        });
        $("#m_about").click(function() {
            $("#cLeft").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
                $("#cLeft").load("about.html", function() {
                    $("#cLeft").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
               
                });
           
            });
       
        });
        $("#m_portfolio").click(function() {
            $("#cLeft").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
                $("#cLeft").load("portfolio.html", function() {
                    $("#cLeft").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
               
                });
           
            });
       
        });
        $("#m_contact").click(function() {
            $("#cLeft").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
                $("#cLeft").load("contact.html", function() {
                    $("#cLeft").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
               
                });
           
            });
       
        });
    });
</script>
</head>

<body>
<div id="content">
    <div id="cLeft">
        <div id="logo_container">
            <div id="logo"></div>
        </div>
    </div><!-- #cLeft -->
    <div id="cLine"></div><!-- #cLine -->
    <div id="cRight">
        <ul class="menulist">
            <li><a href="#" id="m_home">Home</li>
            <li><a href="#" id="m_about">About</li>
            <li><a href="#" id="m_portfolio">Portfolio</li>
            <li><a href="#" id="m_contact">Contact</li></a>
        </ul>
    </div><!-- #cRight -->
</div><!-- #content -->
<script src="js/lightbox.js"></script>
</body>
</html>

Danke schonmal :)
Marcel

NetAktiv · 17 Januar 2016

Ich habe mir vor einiger Zeit die gleiche Frage gestellt, erstelle allerdings meine Seiten über php, die URL ist dann etwas wie index.php?page=xxx. Da ich auch meine Menüs über php erstelle, weiß ich, welcher Menüpunkt zur Seite gehört, und dem gebe ich dann die id=activeMenu bzw beim Submenü mache ich einen Haken davor. Nimm mal als Beispiel http://rainer-rosenberger.de/index.php?page=guestbook, dann ist die Farbe bei Kontakt gelb und wenn du den Menüpunkt aufklappst, hast einen Haken vor dem Gästebuch.
Glaube nicht, dass es geht, denn schließlich heißt aktualisieren ja, alles (inklusive CSS, JS und Bildern) neu vom Server anfordern. Dann müsste der Server schon wissen, dass er gewisse dynamisch ersetzte Inhalte auch so nachliefert.

pipolo100 · 17 Januar 2016

Hallo NetAktiv,

Danke für deine Antwort.
Ich weiß nicht ob ich dich richtig verstanden habe.
Meinst du, ich soll einfach meinen "aktiven" Menüpunkt eine ID geben und den dann per CSS färben? Wenn ja, dann geht das ja nicht, da meine Navi nur in der index.html steht und in keiner anderen .html. Nur der linke Bereich (cLeft) wird mit AJAX reingeladen wird, der rechte (cRight) ändert sich ja nicht.

Gruß,
Marcel

djheke · 17 Januar 2016

Doch es geht mit Nachfahrselektoren.

Der relevante CSS Code

Code:

#home #navi-home a ,
#kontakt #navi-kontakt a ,
#impressum #navi-impressum a{
color:#f00;
}

HTML Code Hier wird die Startdeite hervorgehoben.

HTML:

<body id="home">
<h2>Startseite</h2>
<div id="navi">
<ul>
  <li id="navi-home" ><a href="index.htm">Startseite</a></li>
  <li id="navi-kontakt"><a href="kontakt.htm">Kontakt</a></li>
  <li id="navi-impressum"><a href="impressum.htm">Impressum</a></li>
</ul>
</div>

http://www.gipspferd.de/forumhilfe/aktuellen-link-markieren-mit-css/index.htm
oder mit PHP
http://www.gipspferd.de/CSS-Anleitungen/Aktuellen-Navigationspunkt-mit-PHP-ersetzen

NetAktiv · 17 Januar 2016

pipolo100 schrieb:
dann geht das ja nicht, da meine Navi nur in der index.html

Das ist ja bei mir genauso, aber ich habe eine index.php und werte den ?page=xxx-Parameter aus. Der Rest ist so wie gedacht. Du müsstest halt dem angeklickten Link dynamisch nach erfolgreichem Nachladen eine andere Klasse zuordnen. Aber eventuell geht das ja auch mit dem CSS-Vorschlag von DJ Heke.

djheke · 17 Januar 2016

Ich glaube so ist es besser für pipolo100

CSS

Code:

.menulist a:target b { color: #ff0000; }

HTML

Code:

<ul class="menulist"> <li><a href="#m_home" id="m_home">Home</a></li> <li><a href="#m_about" id="m_about">About</a></li> <li><a href="#m_portfolio" id="m_portfolio">Portfolio</a></li> <li><a href="#m-contact" id="m_contact">Contact</a></li> </ul>

NetAktiv · 17 Januar 2016

djheke schrieb:
Ich glaube so ist es besser für pipolo100

Alles, was funktioniert und was man nicht extra scripten muss, ist eigentlich besser. Da ich meine Menüs aus einem 2-dimensionalen PHP Array automatisch erstelle, muss ich halt keine CSS anpacken, wenn ich einen Menüpunkt hinzufüge oder entferne, das hat auch großen Charme :). Mein Script erkennt anhand des Pagenamen die Position im Array und setzt dann die entsprechenden Attribute. Ähnlich komfortabel könnte es auch pipolo100 machen, ist halt eine Frage, was mehr Aufwand macht. 1x die Scripte zur Automatisierung schreiben oder 1x manuell die CSS und die immer schön anpassen, wenn sich das Menü ändert.

Sempervivum · 18 Januar 2016

Habe zwar die Frage nicht gestellt, aber das Thema interessiert mich auch. Habe zu djhekes Lösung nach der Pseudoklasse target recherchiert und dieses gefunden:
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target
In dem Beispiel dort wird das Linkziel hervorgehoben, nicht jedoch der Verweis in der Linkliste. Wie kann dann dieses Verfahren das Problem des TO lösen, denn dieser will ja den Verweis (in der Navigation entspr. Linkliste im Beíspiel) hervor heben?

Hallo Pipolo100

2. Wenn ich die Seite aktualisiere (F5), werde ich immer auf die Startseite geworfen (bzw. die index.html wird geladen). Gibt es eine Möglichkeit, beim Aktualisieren auf der Seite zu bleiben, auf der ich mich gerade befinde?

Das Laden von Unterseiten mit Ajax wirft noch mehr Probleme auf:

Kein Setzen von Lesezeichen auf die Unterseiten möglich
Navigation mit Vor und Zurück des Browsers funktioniert nicht

Dafür habe ich vor einiger Zeit eine Lösung entwickelt, die Du dir hier ansehen kannst:
http://www.homepage-forum.de/showthread.php?t=60953

djheke · 18 Januar 2016

Sempervivum schrieb:
Wie kann dann dieses Verfahren das Problem des TO lösen, denn dieser will ja den Verweis (in der Navigation entspr. Linkliste im Beíspiel) hervor heben?

Mit :target. Guck dir nochmal die Beispielnaviliste genauer an.

pipolo100 · 18 Januar 2016

Danke für die Antworten.

Die Option von djheke hat funktioniert, vielen Dank!
Allerdings habe ich nun das Problem, dass nach aktualisieren der Seite immer noch die davor besuchte Seite farblich hervorgehoben wird, obwohl ich mich dann ja auf der Startseite befinde. Das finde ich etwas unschön.

Außerdem: Gibt es eine ähnliche Lösung um Buttons (also in dem Fall Div-Container mit Link) auch farblich hervorzuheben (wenn aktiv), obwohl sie per Ajax-Script in die davor mit Ajax-Script geladene Seite geladen werden? (Also sozusagen ein Ajax-Content im Ajax-Content).
Beispielsweise wie bei www.top-web-leasing.de/betatest/marcel unter Portfolio.

Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt :).

Vielen Dank,
Marcel

djheke · 18 Januar 2016

Ja, dass wird wohl vermutlich am JS liegen, aber dabei kann ich die nicht helfen. Ich empfehle dir dein Projekt nochmals zu überdenken und deine Seiten erstmal ohne JS zu erstellen.

Tronjer · 18 Januar 2016

Sempervivum schrieb:
Dafür habe ich vor einiger Zeit eine Lösung entwickelt, die Du dir hier ansehen kannst

Warum so kompliziert, wenn es auch einfach geht?

HTML:

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
      .active {background: #ff0000;}
    </style>
  </head>
  <body class="container" ng-controller="AppController as app">
    <ul class="list-unstyled">
      <li><a ng-href="#/hello" ng-class="{active: app.matchRoute('/hello')}">Click</a></li>
    </ul>
    <ng-view></ng-view>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.1/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.1/angular-route.min.js"></script>
    <script>
      angular.module('myApp', ['ngRoute'])
        .config(function($routeProvider) {
          $routeProvider
            .when('/hello', {template: '<p>Hello World</p>'})
            .otherwise({redirectTo: '/'})
        })
        .controller('AppController', ['$location', function($location) {
          this.matchRoute = function(path) {
            return $location.path() === path;
          };
        }]);
    </script>
  </body>
</html>

Sempervivum · 18 Januar 2016

Wie kann dann dieses Verfahren das Problem des TO lösen, denn dieser will ja den Verweis (in der Navigation entspr. Linkliste im Beíspiel) hervor heben?
Mit :target. Guck dir nochmal die Beispielnaviliste genauer an.

Verstehe ich nicht. In dem Beispiel von Selfhtml wird das Linkziel hervorgehoben, nicht der Link in der Naviliste selber.

Sempervivum · 18 Januar 2016

Tronjer schrieb:
Sempervivum schrieb:

Dafür habe ich vor einiger Zeit eine Lösung entwickelt, die Du dir hier ansehen kannst

Zum Vergrößern anklicken....

Warum so kompliziert, wenn es auch einfach geht?

Ich verwende diesen Code, weil er für mich lesbar ist und ich ihn verstehe. Dadurch bin ich in der Lage, ihn zu warten, anzupassen, zu erweitern und wiederzuverwenden, wodurch wichtige Qualitätskriterien erfüllt sind.

thecain · 18 Januar 2016

Sempervivum schrieb:
Ich verwende diesen Code, weil er für mich lesbar ist und ich ihn verstehe. Dadurch bin ich in der Lage, ihn zu warten, anzupassen, zu erweitern und wiederzuverwenden, wodurch wichtige Qualitätskriterien erfüllt sind.

Bei dem Script fehlt aber ein paar mal var... von wegen Qualitätskriterien.

Und @Tronjer s Skript hat auch nichts mit unlesebar zu tun, man muss sich halt einfach mal in Angular einlesen (im aktuellen Fall etwa 15 Minuten bei bestehenden Kentnissen)

Tronjer · 19 Januar 2016

Sempervivum schrieb:
Ich verwende diesen Code, weil er für mich lesbar ist und ich ihn verstehe. Dadurch bin ich in der Lage, ihn zu warten, anzupassen, zu erweitern und wiederzuverwenden, wodurch wichtige Qualitätskriterien erfüllt sind.

Ich wollte dir nicht zeigen, dass ich es besser kann, sondern vielmehr Gedankenanstöße geben.

- In SinglePage Apps lassen sich Routen anlegen, ohne dass dazu manuell etwas in die URL gepusht werden müsste.
- Es ist nicht notwendig, eine URL als normalen String zu parsen und dazu noch Regex zu verwenden. Bei Location handelt es sich um ein Objekt mit Eigenschaften, die sich abfragen lassen.
- Die Direktive ng-class ist ziemlich genial, weil sie direkt im HTML-Tag eine Expression auswerten kann: ng-class="{myclass: true}"

djheke · 19 Januar 2016

Sempervivum schrieb:
Verstehe ich nicht. In dem Beispiel von Selfhtml wird das Linkziel hervorgehoben, nicht der Link in der Naviliste selber.

In diesem Fall liegt doch das Linkziel im A-Element selbst -was normalerweise keinen Sinn macht. So lässt sich aber der Link hervorheben. Alternativ könnte man vielleicht ein Inputfeld nehmen und :checked auswerten. Was aber auch keinen Sinn macht.

Frage Aktuelle Seite hervorheben - AJAX

pipolo100

Neues Mitglied

NetAktiv

Senior HTML'ler

pipolo100

Neues Mitglied

djheke

Aktives Mitglied

NetAktiv

Senior HTML'ler

djheke

Aktives Mitglied

NetAktiv

Senior HTML'ler

Sempervivum

Guest

djheke

Aktives Mitglied

pipolo100

Neues Mitglied

djheke

Aktives Mitglied

Tronjer

Senior HTML'ler

Sempervivum

Guest

Sempervivum

Guest

thecain

Aktives Mitglied

Tronjer

Senior HTML'ler

djheke

Aktives Mitglied

Neueste Beiträge