Aktuelle Seite trotz AJAX hervorheben

[Tristan Schmidt]

Halle Forum,

gibt es eine Möglichkeit die aktuelle Seite trotz AJAX hervorzuheben?
In meinem Fall soll der entsprechende "Navigationsreiter" mit einer Farbe hinterlegt werden.

Zuvor hatte ich die Website so mit JavaScript programmiert, so dass beim Laden eines entsprechenden Links nur der Inhaltsbereich neugeladen wird. Das ganze habe ich doch noch mit einem kleinem "Einschub" animiert.

Nun wird aber immer nur durchgehend der Index blau hervorgehoben.

Hier meine Seite: IDG - ENGINEERING

JavaScript:

$(document).ready(function() {


    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }
    });


    $('#nav li a').click(function(){


        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('slow',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load"></span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('slow',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;


    });


});

CSS:

body{background-image: url('images/metal-k.jpg');
padding: 0;
margin: 20px auto;
width: 950px;
font-family: 'Oxygen', sans-serif;
box-shadow: 0 0 13px 6px black
}


#wrapper {
    width: 950px;
    background-color: #C3CFE6;
    position: relative;
}


#kopf {
    width: 950px;
    height: 175px;
    background-image: url('images/header.png');
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -khtml-border-top-left-radius: 5px;
    -khtml-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}


#steuerung {
width: 950px;
}


.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('images/topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; cursor:pointer;  outline:none; font-style:normal; font-variant:normal; font-weight:normal; font-size:20px; font-family:Oxygen, sans-serif; no-repeat}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('images/topMenuImages.png') no-repeat 100% -30px;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; background:url('images/topMenuImages.png') no-repeat 0px -90px; color:rgb(255,255,255); font-style:normal; font-variant:normal; font-weight:normal; font-size:20px; font-family: Oxygen, sans-serif}
.menu li a.active span, .menu li a.active:hover span{background:url('images/topMenuImages.png') no-repeat 100% -90px;}
.menu li {text-align: center;}


#content {
    background-color: #C3CFE6;
    width: 950px;
    margin-top: 0;
    padding-bottom: 5px;
    text-align: center;
    height: 400px;
}


h1 {
    text-align: center;
    text-transform: uppercase;
}




#footer {
    width: 950px;
    text-align: center;
    padding-top: 10px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -khtml-border-bottom-left-radius: 5px;
    -khtml-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top:1px solid #3C3C3C;
    position: absolute;
    bottom: 8px;
}


#footer a{
    text-decoration: none;
    color:black;
}


#footer a:hover {
    color:white;
}

 

[Sentence]

Moin,
addClass und removeClass sollte dir helfen.

MfG

 

[Tristan Schmidt]

Ich kann mit diesen jQuery Funktionen leider wenig anfangen. Sprich: Wo kann ich diese "einfügen"?
Meine JavaScript Datei basiert auf einem Online Tutorial zu der entsprechenden Animation. Diese konnte ich glücklicherweise an meine Website anpassen.

Vielen Dank für eure Unterstützung!

 

[Sentence]

Moin,
ok das wusste ich ja nicht ;-)
Direkt unter

$('#nav li a').click(function(){

fügst du folgendes hinzu:

$('#nav li a').removeClass('active');
$(this).addClass('active');

MfG

 

[Tristan Schmidt]

Danke

Klappt einwandfrei...

 

[Cheffchen]

Hallo ich schmeiss mich mal mit rein mit ner einfachen frage.

Ist Ajax immer noch Schei... für Suchmaschienen wie die oben?

Also das die keine chance hat vernünftig gefunden zu werden da quelltext natürlich sehr bescheiden ist und nur für Spielerein ist oder für Firmen die nicht so gefunden werden mussen da groß (Porsche/Benz/...) oder genügent geld für Adwords und co. haben.

Cheffchen

 

[Sentence]

Moin Cheffchen,
Google z.B. kann grundsätzlich mit JS und Ajax umgehen. Mann sollte sich nur an ein paar Guidelines halten, damit die Seiten auch richtig indexiert werden. Sprich, Unterseiten welche per Ajax aufgerufen werden.

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
Yahoo und Bing indexieren i.d.R. genauso.

MfG