✔ Link als "active" kennzeichnen

G

greenslot

Mitglied
Hallo zusammen,

steh gerade auf dem Schlauch... Ich habe mehrere Abschnitte auf einer Seite die jeweils mit einer id versehen werden und dann über einen Link angesteuert werden können: seite.html#abschnitt4
Ist eigentlich so wie hier im Forum in den Threads mit thread.html#post12345

Nun würde ich gern diese aufgerufenen Links als "active" markieren bzw. wenn er aufgerufen wird, soll eine id="active" vergeben werden.

Kann man das mit der Übergabe von #abschnitt irgendwie lösen?

Danke für eure Tipps!!
 
Da das ein HTML Anker ist und somit PHP nicht noch einmal ausgeführt wird musst du hier auf JavaScript ausweichen.
 
Ist eigentlich ganz einfach:

HTML: 
<script language="javascript" type="text/javascript">
function verweis (id) {
	for (a = 1; a < 5; a++) {
		document.getElementById(a).style.fontWeight = "normal";
	}
	document.getElementById(id).style.fontWeight = "bold";
}
</script>
<a href="#1" onclick="verweis(1);">Verweis 1</a>
<br />
<a href="#2" onclick="verweis(2);">Verweis 2</a>
<br />
<a href="#3" onclick="verweis(3);">Verweis 3</a>
<br />
<a href="#4" onclick="verweis(4);">Verweis 4</a>
<br />
<a href="#5" onclick="verweis(5);">Verweis 5</a>
<br />
<br />
<br />
<a name="1" id="1">Verweis 1</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="2" id="2">Verweis 2</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="3" id="3">Verweis 3</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="4" id="4">Verweis 4</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="5" id="5">Verweis 5</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
 
tombe hat gesagt.:
Ist eigentlich ganz einfach ...
Zum Vergrößern anklicken....
Vielen Dank für das Beispiel!
Bis auf Verweis 5 klappt das mit allen anderen. Dieser bleibt nach dem Klicken immer fett.
Ich habe dann in der for Schleife a < 6 angegeben, dann wurde der auch wieder normal, wenn man auf einen anderen Link geklickt hat.

Noch eine allgemein Frage zu JavaScript...
Muss man den Code noch in HTML-Kommentare packen? Die aktuellen Browser und die der letzten Jahre können das ja alle, oder?
 
Stimmt, sorry da habe ich mal wieder nicht richtig nachgedacht.

Auf das (aus-)kommentieren kannst du mit Sicherheit verzichten, denn heute sollten alle Browser wissen wie sie mit Javascript umgehen müssen.
 
Noch eine Frage... gibt es eine Möglichkeit, den Link fett zu formatieren, wenn man jetzt über eine externe Seite kommt und nur die Adresse hat?
Wenn ich jetzt nur die Adresse http://localhost/test.html#2 in den Browser eingebe, dann wird der Verweis nicht fett formatiert.
 
Schau mal ob dir das hilft:

HTML: 
<script language="javascript" type="text/javascript">
function parameter() {

var seite = document.location.href

parameter = seite.search(/#/);
if (parameter != -1) {
	parameter = seite.substring((parameter + 1), seite.length);
    verweis(parameter);
}

}
function verweis (id) {
	for (a = 1; a < 6; a++) {
		document.getElementById(a).style.fontWeight = "normal";
	}
	document.getElementById(id).style.fontWeight = "bold";
}
</script>
<body onload="parameter();">
<a href="#1" onclick="verweis(1);">Verweis 1</a>
<br />
<a href="#2" onclick="verweis(2);">Verweis 2</a>
<br />
<a href="#3" onclick="verweis(3);">Verweis 3</a>
<br />
<a href="#4" onclick="verweis(4);">Verweis 4</a>
<br />
<a href="#5" onclick="verweis(5);">Verweis 5</a>
<br />
<br />
<br />
<a name="1" id="1">Verweis 1</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="2" id="2">Verweis 2</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="3" id="3">Verweis 3</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="4" id="4">Verweis 4</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="5" id="5">Verweis 5</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore...</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>

Beim Laden der Seite wird zuerst die neue Funktion ausgeführt und geprüft ob ein Parameter übergeben wurde. In diesem Fall wird die zweite Funktion aufgerufen und den Link entsprechend formatiert.
 
Danke!! Das klappt jetzt!

Könntest du vielleicht die Paramater Funktion bitte noch mit ein paar Erklärungen/Kommentaren ergänzen, damit man das besser nach vollziehen kann?
Will es ja auch verstehen. :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück