Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
Ich habe eine Seite, durch die mit dem Pseudo Selector ":target" von CSS3 navigiert wird. Nun benötige ich eine entsprechende Lösung, durch die der JavaScript Code, welcher im Hintergrund arbeitet, weiß, auf welcher Seite sich der User gerade befindet.
Wie lese ich mit JavaScript am besten das momentane Target aus? (also z.B.: #home)
Nein, leider nicht.
Es handelt sich um ein Quiz, bei dem die Fragen über target's ausgetauscht werden. Es ist jedoch auch ein Timer vorhanden, der die Punkte, die man bekommt, je nach verstrichener Zeit, zurückrechnet.
Diese Punkte, die man für die Aufgabe noch bekommen kann, sollen in einem DIV angezeigt werden und das immer zur jeweiligen Frage, da die maximalen Punkte, je nach Schwierigkeitsgrad, variieren.
Aber deine Idee gefällt mir. Das ich da nicht selbst drauf gekommen bin .
Danke
Wenn das Quiz fertig ist würd ich gern mal einen Blick drauf werfen, falls das möglich ist. Für kreative Verwendungen von :target bin ich immer zu haben. Bisher habe ich damit:
- aus einer längeren Liste von Artikeln ein Pseudo-Akkordion gemacht (ohne Animation)
- eine Art CSS Lightbox gebaut. Ich hab im Footer einer Seite ein paar Info-Boxen versteckt, die bei :target sanft von unten eingeblendet werden, inklusive CSS-basiertem Schließen-Button.... am Ende musst ich es dann aber doch alles mit JS überlagern, weil der IE9 nicht mitspielt, geschweige denn der 8er und älter.
Mir ist da noch eine kleine Idee gekommen: Wenn du an sehr viele Elemente einen Event-handler anbauen willst, kann man das einfach mit einer Schleife machen:
Code:
var elements = document.getElementsByClassName("test");
for (var i = 0; i < elements.length; i++) {
elements[i].onclick = function() {
//hier das Target aus dem url lesen oder etwas anderes
};
}
Dann muss man nicht überall im HTML-Code die onclick handler einbauen, sondern kann es einfach per class vergeben. Geht natürlich auch per "getElementsByTagName", wenn du die tags nirgendwo anderes nutzt. Hilft vielleicht.
@T0a5tbr0t: Und was soll ihm dieser Tipp bringen? Bis zum jetzigen Zeitpunkt weiß nur Chris000 ob er die EventHandler in HTML oder JavaScript definiert hat. Der Tipp ist also total ins blaue geraten. Da könnte man auch gleich noch andere Dinge vorschlagen, die für ihn genauso nutzlos sind.
Oder der nächste nimmt sich deinen (überflüssigen) Tipp zu Herze und löst eine Diskussion aus, wie man dein Beispiel noch weiter optimieren kann, das geht aber nachher am Thema vorbei, weil es den Code von Chris000 gar nicht betrifft. Dein Beispiel ließe sich z.B. über Event Delegation bei wirklich vielen Elementen viel viel viel effizienter lösen.
Ich hab das Beispiel gepostet, da es zu der Frage passte?! Wenn man mit CSS und :target arbeitet, bietet es sich eben an auch über CSS Attribute (wie class) eventhandler zu vergeben. Und dafür gibt es eben ein paar gute Ansätze um sich mit Javascript Arbeit zu sparen bzw. alles sehr flexibel zu gestalten.
Ich wollte dir nur verdeutlichen, dass du einen "Tipp" erteilst, aber nichtmal weißt, wie Chriss000 es gelöst hat. Wenn er es also genauso gemacht hat, ist der Tipp nutzlos. Wenn er Voodoo nutzt, ist der Tipp nutzlos.
Und wenn nun jeder irgendeinen vermeintlichen Tipp abgibt, driftet das Thema total ab. Vor allem wenn, wie ich dir verdeutlicht habe, dein Tipp noch weiter optimiert werden kann (bei vielen Event Handlern ist Delegation nämlich viel effizienter).
Da die Fragen des Quiz sowieso dynamisch (von Javascript) erstellt werden, lasse ich einfach bei jedem Button gleich einen Funktionsaufruf dahinter platzieren.
Ich habe es letztendlich doch so gelöst, dass ich einfach bei dem Überprüfen der Frage (richtig oder falsch), den Timer der nächsten Frage aktiviert habe. Ist zwar nicht die eleganteste Lösung, aber es funktioniert und kann man später immer noch verändern.
. 
