Antworten auf deine Fragen:
Neues Thema erstellen

Active bei One Page Webseiten?

onpoint

Aktives Mitglied

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
 

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');
});
 
Zuletzt bearbeitet:

cebito

undefined

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

Aktives Mitglied

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...

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

Mod | Forum

AW: Active bei One Page Webseiten?

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..
 
Zuletzt bearbeitet:

onpoint

Aktives Mitglied

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
 
Zuletzt bearbeitet:

simonpicos

Mod | Forum

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 :D

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

onpoint

Aktives Mitglied

AW: Active bei One Page Webseiten?

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 :D

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

cebito

undefined

AW: Active bei One Page Webseiten?

"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

Aktives Mitglied

AW: Active bei One Page Webseiten?

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

undefined

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

Aktives Mitglied

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.

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

Mod | Forum

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

Aktives Mitglied

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 ;)

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
 
Zuletzt bearbeitet:

simonpicos

Mod | Forum

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

undefined

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

Aktives Mitglied

AW: Active bei One Page Webseiten?

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

Mod | Forum

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 :D
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben