a:active {
color: blue;
}
?
Ansonsten kannst du bei Reaktionen auf Klick ohne Javascript mit dem checkbox-Hack arbeiten, das erfordert allerdings immer das zusätzliche Markup im HTML und ist nicht wirklich semantisch korrekt..
Über CSS möglich? Ja, dazu musst du nur den entsprechenden Link in den Ziel-Container packen und per position in die Steuerung verschieben, sehr unüblich.
Nimm JavaScript (und poste deine Lösung hier?^^).
Der :active Selektor greift leider nur so lange wie die Maustaste gedrückt wird.
Du willst also einfach den entsprechenden Navigationspunkt einfärben wo der User gerade ist? Hört sich nach scrollspy an..
Ja das will ich 
Scrollspy? feststehender begriff oder irgendein plugin ...? 
<- gibts wohl als JQ plugin aber ich will selbermachen 
Naja die Plugins heißen halt alle so, also würde ich schon von nem feststehenden Begriff reden^^
Also ich habe diesen Begriff mal umgesetzt 
Die zu überwachenden Elemente müssen ID's besitzen die
a) Beim element als »id="ID"«
b) Im Array »keys«
c) Im zu markierenden Element als Attribut »data-linked» mit der jeweiligen ID als Wert
Hinterlegt sind
Beim zu markierenden Element wird bei zutreffender Bedingung die klasse »active« hinterlegt
scrollspy.js
//Nach dem Leden ausführen
$(document).ready(function(){
//Wenn fenster breiter als 570px
if(($(window).width()) >= 570){
//zu scrollspy() springen
scrollspy();
};
//Beim scrollen funct ausführen
$(window).bind( 'scroll', function() {
//Wenn fenster breiter als 570px
if(($(window).width()) >= 570){
//zu scrollspy() springen
scrollspy();
};
});
});
function scrollspy() {
/** Scrollspy by Wolf Wortmann
* (c) Copyright 2014 Wolf Wortmann <wolf.wolfgang-m.de> / <wolf@wolfgang-m.de>
*
* This work is licensed
* under a Creative Commons Attribution - ShareAlike 4.0 International License.
*
* http://creativecommons.org/licenses/by-sa/4.0/
*
* Have FUN !!! =)
*/
//Aktuellen Scroll Status auslesen
var scroll = $(window).scrollTop();
//Die ID's der zu überwachenden Elemente
var keys = new Array('EINS','ZWEI','DREI','VIER');
//Für jedes Elem.
$.each( keys, function( i, key ) {
var elemID = key;
//Die Scroll höhe des zu überwachenden elementes feststellen (-150 das schon in der nähe reagiert wird)
//Hier mit normalem JS arbeiten da $(elem).offset().top nur den Statischen wert zurrückgibt
if (scroll >= ( document.getElementById(elemID).offsetTop-150)) {
//Jedes elem. auf der Seite
$.each( $('*'), function() {
//Wenn es das attr data-linked besitzt und dieses der aktuellen ID entspricht
if( $(this).attr('data-linked') == elemID ){
//Bei allen elementen die klasse löschen
$.each( $('*'), function() {
$(this).removeClass('active');
});//each elem page
//Klasse beim richtigen Elem. hinzufügen
$(this).addClass('active');
}//If elem found
});//each elem page
};//if scroll higher than Elem. offsetTop
});//each Key
}//function scrollspy<a href="#EINS" data-linked="EINS">Zu EINS</a>
<div id="EINS">
</div>Wenn jetzt das Div EINS nurnoch 150px vom oberen Rand entfernt ist, wird beim Link die klasse »active« hineingeschrieben.
Hat es irgendnen besonderen grund dass du die keys fest reinschreibst und nicht dynamisch ausliest..?
var keys = new Array('EINS','ZWEI','DREI','VIER');hier?
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!