Autor |
Nachricht |
dtprofi
Threadersteller
Dabei seit: 16.02.2006
Ort: Neufünfland ziemlich oben
Alter: 63
Geschlecht:
|
Verfasst Mi 19.04.2006 16:24
Titel [Solved] [JS] JS-Navi |
|
|
Ich habe diesen Script in einem älteren Beitrag gefunden, geht auch wonderbra.
Aber wie bekomme ich jetzt den Hover-Effekt hin?
Code: | <html>
<head>
<script>
var currentItem = "link_1";
function Navigation(Id)
{
var CssClassActive = "active";
var CssCLassInactive = "inactive";
// Altem Item inaktive Klasse zuweisen
if(currentItem != "")
{
document.getElementById(currentItem).className = CssCLassInactive;
}
// Neuem Item aktive Klasse zuweisen
document.getElementById(Id).className = CssClassActive;
// Neues Item merken
currentItem = Id;
}
</script>
<style>
a.active
{
color: green
}
a.inactive
{
color: blue
}
a.hover
{
color: red
}
</style>
</head>
<body>
<a href="#" id="link_1" class="inactive" onclick="Navigation(this.id);">Link 1</a><br/>
<a href="#" id="link_2" class="inactive" onclick="Navigation(this.id);">Link 2</a><br/>
<a href="#" id="link_3" class="inactive" onclick="Navigation(this.id);">Link 3</a><br/>
</body>
</html> |
Danke
Jo
Zuletzt bearbeitet von dtprofi am Do 20.04.2006 09:24, insgesamt 4-mal bearbeitet
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 19.04.2006 16:34
Titel
|
|
|
Code: |
a:hover
{
color: red
}
|
pseudoclassen wie a:hover schreibt man
mit doppelpunkt
Zuletzt bearbeitet von Raumwurm am Mi 19.04.2006 16:35, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
dtprofi
Threadersteller
Dabei seit: 16.02.2006
Ort: Neufünfland ziemlich oben
Alter: 63
Geschlecht:
|
Verfasst Mi 19.04.2006 16:57
Titel
|
|
|
...war'n langer Tag. Danke.
Jo
|
|
|
|
|
dtprofi
Threadersteller
Dabei seit: 16.02.2006
Ort: Neufünfland ziemlich oben
Alter: 63
Geschlecht:
|
Verfasst Mi 19.04.2006 20:42
Titel
|
|
|
ok, das läuft; aaaaber:
Code: | <a href="#" id="link_1" class="z1 s1 inactive" onclick="Navigation(this.id);">Link 1</a><br/> |
was muss ich tun, damit die beiden anderen zugewiesenen Klassen erhalten bleiben?
Zuletzt bearbeitet von dtprofi am Do 20.04.2006 08:24, insgesamt 1-mal bearbeitet
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 20.04.2006 08:51
Titel
|
|
|
ja einerseites könntest du die classen z1 und s1
rauskicken und in der #link_1 mitdefinieren,
oder andererseits mit dem script reinschreiben:
var CssClassActive = "z1 s1 active";
var CssCLassInactive = "z1 s1 inactive";
vorausgesetzt, es bleibt bei z1 und s1. falls nicht
müsstest du dann in der function die momentanen
classen auslesen und das active per replace()
mit inactive ersetzen und wieder zuweisen. insgesamt
ists aber schon sehr abenteuerlich das ganze.
was willst du eigentlich machen? nur einen link
highlighten? wenn ja, wieso dann per javascript und
nicht einfach statisch per css (weil du gibts das
currentItem ja auch statisch im javascript an und
wenn du die seite verlässt (über einen klick auf die
navi) dann geht ein umdefiniertes currentItem ja auch
verloren...). oder bleibst du immerauf der selben
seite? verstehe ich jetzt nicht wirklich.
|
|
|
|
|
dtprofi
Threadersteller
Dabei seit: 16.02.2006
Ort: Neufünfland ziemlich oben
Alter: 63
Geschlecht:
|
Verfasst Do 20.04.2006 09:21
Titel
|
|
|
Das Script setz ich in der Navi ein, dabei sind die Buttons im CSS mittels Zeile und Spalte platziert (z1 s1...).
Der Inhalt steht in einem iframe.
Ich seh's: ich muss die Platzierung in #link_1 zuweisen. Ist dann zwar nicht mehr so universell, aber dafür übersichtlicher. Danke.
Jo
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS UL LI NAVI
Navi und Box-Modell
navi mit flash 8
Bilder Navi
Problem mit css navi
Simple Navi
|
|