Active bei One Page Webseiten?

onpoint · 14.01.2012

Hallo an´s ganze Forum!

Ich hätte da mal eine Frage. Wie löse ich das, dass bei einer One Page Webseite Buttons auf active gesetzt sind, die angeklickt wurden?

Im Grunde gibt es da ja keine einzelnen Unterseiten, bei denen ich jeweils einfach die Klasse ändern kann.

Lässt sich das Problem mit Html/Css lösen? Oder muss ich dafür auf Javascript zurückgreifen?

Lg

Pascal Bajorat · 14.01.2012

AW: Active bei One Page Webseiten?

Wenn du mehrere Navigationen hast einfach mit einer Klasse entsprechend der jeweiligen Navigationen einstellen und wenn du nur eine Navi hast die immer mitgeht, dann z.B. mit CSS :target, ansonsten ist die letzte Variante JavaScript.

Mit jQuery wäre eine Lösung z.B. diese hier:

HTML:

$('nav a').click(function(){
    $('nav a').removeClass('active');
    $(this).addClass('active');
});

cebito · 14.01.2012

AW: Active bei One Page Webseiten?

Das sollte mit :target bzw. :not

target) per CSS machbar sein.

onpoint · 15.01.2012

AW: Active bei One Page Webseiten?

cebito schrieb:
Das sollte mit :target bzw. :nottarget) per CSS machbar sein.

Dafür müsste ich eigentlich einfach nur jedem der Anker-Verlinkungen eine eigene Klasse zuweisen und auf alle jeweils target anwenden?

cebito · 15.01.2012

AW: Active bei One Page Webseiten?

Dafür muss der Link aber selbst dort drin sein. Muss man ein wenig tricksen

http://jsfiddle.net/jE5zg/1/

Aber ich denk mal, das ist für deine onpointmusic-Seite. Eh du da anfängst die Navi auseinanderzunehmen, würd ichs doch mit JS machen...

onpoint · 15.01.2012

AW: Active bei One Page Webseiten?

cebito schrieb:
Dafür muss der Link aber selbst dort drin sein. Muss man ein wenig tricksen http://jsfiddle.net/jE5zg/1/

Aber ich denk mal, das ist für deine onpointmusic-Seite. Eh du da anfängst die Navi auseinanderzunehmen, würd ichs doch mit JS machen...

Hallo Cebito

Ne, das ist für eine Portfolio-Seite, die ich aus Übungszwecken umsetzwen möchte. Daraufhin versuch ich sie auf Wordpress umzusetzen.

Link:

Also wäre Javascript da empfehlenswerter?

Lg

simonpicos · 15.01.2012

AW: Active bei One Page Webseiten?

onpoint schrieb:
Hallo Cebito

Ne, das ist für eine Portfolio-Seite, die ich aus Übungszwecken umsetzwen möchte. Daraufhin versuch ich sie auf Wordpress umzusetzen.

Link:

Also wäre Javascript da empfehlenswerter?

Lg

Nicht unbedingt.. Da deine Navi ja sowieso am oberen Rand gefixed ist, dürfte das nicht allzu schwer zu positionieren sein..

onpoint · 15.01.2012

AW: Active bei One Page Webseiten?

Hmm....was die css Vorgehenswweise angeht bin ich ziemlich verwirrt muss ich sagen. Ich versuche es wohl erstmal mit der Javascript-Variante, die mir als einfacher erscheint. Leider bin ich Javascriptmäßig echt nicht so der Profi.

Folgender Code:

HTML:

$('nav a').click(function(){
    $('nav a').removeClass('active');
    $(this).addClass('active');
});

"nav" ist die id, die ich für die navigation bestimmt habe? also bei mir wohl "navi"?
Bei der nächsten Zeile wird die Klasse dann entfernt bei einem Klick? Und was macht er bei der nächsten Zeile? Laut Code fügt er wieder eine Klasse hinzu. Das ergibt für mich jedoch nicht wirklich einen Sinn, so wie es steht...

Lg

simonpicos · 15.01.2012

AW: Active bei One Page Webseiten?

Also mit js kenn ich mich leider auch nicht so aus, als dass ich hilfreiche Antworten geben könnte

Bei der Variante mit CSS kann ich aber bei Bedarf gerne weiterhelfen

onpoint · 15.01.2012

AW: Active bei One Page Webseiten?

simonpicos schrieb:
Bei der Variante mit CSS kann ich aber bei Bedarf gerne weiterhelfen

Wenn´s mit Javascript doch ein Stück komplizierter sein sollte, werde ich definitiv auf die Variante mit CSS zurückgreifen, da ich das auch besser nachvollziehen kann, wenn ich mir das Dokument nach 4 Wochen wieder anschaue

Also vorab schon mal danke für deine eventuelle Hilfe!

cebito · 15.01.2012

AW: Active bei One Page Webseiten?

onpoint schrieb:
"nav" ist die id, die ich für die navigation bestimmt habe? also bei mir wohl "navi"?
Bei der nächsten Zeile wird die Klasse dann entfernt bei einem Klick? Und was macht er bei der nächsten Zeile? Laut Code fügt er wieder eine Klasse hinzu. Das ergibt für mich jedoch nicht wirklich einen Sinn, so wie es steht...

Lg

Ergibt schon einen Sinn. Beim Klick auf ein a-Element das innerhalb einer HTML5-nav liegt (um eine ID nav anzusprechen müsste dort #nav stehen) wird bei allen a-elementen die innerhalb einer nav liegen die Klasse "active" entfernt. In "$(this)" ist NUR das angeklickte Element gespeichert, und NUR diesem wird jetzt die Klasse "active" gegeben.

onpoint · 15.01.2012

AW: Active bei One Page Webseiten?

cebito schrieb:
Ergibt schon einen Sinn. Beim Klick auf ein a-Element das innerhalb einer HTML5-nav liegt (um eine ID nav anzusprechen müsste dort #nav stehen) wird bei allen a-elementen die innerhalb einer nav liegen die Klasse "active" entfernt. In "$(this)" ist NUR das angeklickte Element gespeichert, und NUR diesem wird jetzt die Klasse "active" gegeben.

Muss ich dann alle Navigationspunkte vorab auf die Klasse "active" verweisen?

Irgendwie läuft es noch nicht so.

Meine Navi:

HTML:

<ul id="navi">
<li class="active"><a href="#start">START</a></li>
<li><a href="#personlink">PERSON</a></li>
<li><a href="#galerielink">PORTFOLIO</a></li>
<li><a href="#leistungenlink">LEISTUNGEN</a></li>
<li><a href="#kontakt">KONTAKT</a></li>
</ul>

Mein Javascript:

HTML:

<script type="text/javascript">
$('#navi a').click(function(){
    $('#navi a').removeClass('active');
    $(this).addClass('active');
});
</script>

Lg

cebito · 15.01.2012

AW: Active bei One Page Webseiten?

"Irgendwie läuft nicht" ist ne super Problembeschreibung. Bau das doch mal ein, das man es auch sehen kann, was nicht läuft. Bei dir hat li die Klasse, nicht a, also müsstest du auch li ansprechen. Desweiteren solltest du deine Scripte mal aufräumen. $(document).ready am Ende der Seite ist ziemlich sinnfrei, denn dann ist die Seite bereits geladen, und zweimal hats im Document schon gar nix zu suchen.

onpoint · 15.01.2012

AW: Active bei One Page Webseiten?

cebito schrieb:
"Irgendwie läuft nicht" ist ne super Problembeschreibung. Bau das doch mal ein, das man es auch sehen kann, was nicht läuft. Bei dir hat li die Klasse, nicht a, also müsstest du auch li ansprechen. Desweiteren solltest du deine Scripte mal aufräumen. $(document).ready am Ende der Seite ist ziemlich sinnfrei, denn dann ist die Seite bereits geladen, und zweimal hats im Document schon gar nix zu suchen.

das mit dem $(docuent).ready habe ich aus einer Anleitung des jquery localScroll..anders würde es nicht starten stand dort.

Ich habe die Seite wie sie momentan ist mal hochgeladen. Mit dem Verweis auf li tut sich noch immer nichts. Was das genaue Problem ist? Ja, es passiert gar nichts

den li´s habe ich jetzt die Klasse active verpasst.

Logischerweise sollte er jedoch alle erstmal ausblenden, oder?

Lg

simonpicos · 15.01.2012

AW: Active bei One Page Webseiten?

Im Moment werden alle Links als "aktiv" angezeigt, da du jeden Link in deiner Navi ansprichst. (jeder Link ist Kindelement eines li mit der Klasse .active)

Ich probier grad mal ein wenig rum und zeig dir dann wie es funktionieren sollte

onpoint · 15.01.2012

AW: Active bei One Page Webseiten?

simonpicos schrieb:
Im Moment werden alle Links als "aktiv" angezeigt, da du jeden Link in deiner Navi ansprichst. (jeder Link ist Kindelement eines li mit der Klasse .active)

Ich probier grad mal ein wenig rum und zeig dir dann wie es funktionieren sollte

Ja, richtig.

Ich habe jedem Link die Klasse active zugwiesen, da ich davon ausgehe, dass der Javascript Code alle wieder ausblendet, um dann einzelne wieder einzublenden. Oder habe ich da nen Denkfehler?

Lg

-edit-

Ich habs! Es war die falsche Positionierung des Javascript Codes! Habe es direkt unter die Navi gesetzt und jetzt funktioniert es!

Problem: Sobald man auf die Seite kommt und noch kein Anker angeklickt wurde sind alle Links auf active gesetzt. Kann ich das irgendwie ändern? Alternativ würde ansonsten nur eine Weiterleitung auf "/#start" helfen..

Lg

simonpicos · 15.01.2012

AW: Active bei One Page Webseiten?

ja hast du. die Funktion wird nämlich erst aufgerufen wenn eine der links geklickt wird. gib am Anfang nur dem ersten link die klasse active . (bzw dem li)

cebito · 15.01.2012

AW: Active bei One Page Webseiten?

Funktioniert doch, nur das du nicht jedem Link am Anfang die Klasse geben musst, sondern nur dem aktiven...

onpoint · 15.01.2012

AW: Active bei One Page Webseiten?

cebito schrieb:
Funktioniert doch, nur das du nicht jedem Link am Anfang die Klasse geben musst, sondern nur dem aktiven...

Achso, stimmt ja! Der benötigt ja gar nicht die Aktivierung aller active Klassen.
Somit hätte sich das zweite Problem auch erledigt!

Ich danke euch! Funktioniert super!

simonpicos · 15.01.2012

AW: Active bei One Page Webseiten?

:lol:

Ich wurschtel mich grad in deinem Code rum und aktualisiere mal kurz.. Auf einmal funktionierts.. Ich erst mal so: hää?
Schau hier rein und sehe das es längst gelöst ist