Javascript Link Status

X

xistr

Grünschnabel
Brauche sehr dringend eure Hilfe. Bin mir sicher hier kennen sich einige gut mit Javascript aus.

Bin im Moment eine Navigation am machen, die beim Klick auf den jeweiligen Button, diesen grafischen 'Klick-Status'
dann auch beibehalten soll.

Ich habe im Internet einen Code gefunden, der super funktioniert.
Das Problem ist, dass dieser nur für einen Button (und hover/clicked Status) gedacht ist.
Ich benötige für meine Navigation aber 4 Button, mit den jeweiligen Statis.

Hier ist die momentane Situation: http://pdhotel.pd.funpic.de/test/index.html

Könnte das einer für mich umschreiben?
Hab die ganze Nacht rumprobiert, und bekomm es leider nicht selbst hin.

Der Code ist folgender:
Code: 
<html>
<head>

<script type="text/javascript">
<!--
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}

//-->
</script>



<style type="text/css">
<!--

html,body {
padding:0px;
margin:0px;
}



#weg {
width:80px;
height:61px;
border:0px;
padding:0px;
margin-top:-20px;
}

a.nav {
background: url(about.png);
width:80px;
height:61px;
font-size:54px;
padding:0px;
margin:0px;
}

a.nav:hover, a.clicked {
background: url(about-on.png);
width:80px;
height:61px;
font-size:54px;
padding:0px;
margin:0px;
}
-->
</style>

</head>
<body>
<a href="#link1" class="nav" onclick="aktivieren(this.href)"><img src="spacer.png" id="weg"/></a>
<a href="#link2" class="nav" onclick="aktivieren(this.href)"><img src="spacer.png" id="weg"/></a>
<a href="#link3" class="nav" onclick="aktivieren(this.href)"><img src="spacer.png" id="weg"/></a>
<a href="#link4" class="nav" onclick="aktivieren(this.href)"><img src="spacer.png" id="weg"/></a>
</body>
</html>
 
Hi,

verstehe ich dich richtig, dass du erreichen willst, dass jeder Button beim Klicken den Status zwischen aktiviert und deaktiviert wechseln soll?

In diesem Fall kannst du auf das Durchlaufen der Links und das Entfernen der clicked-Klasse verzichten. Stattdessen übergibst du der Funktion das auslösende Element und entscheidest anhand des aktuellen Klassennamen, welche Klasse zugewiesen werden muss.

Beispiel:
Code: 
<html>
<head>
<script type="text/javascript">
<!--
function aktivieren(_this){
  _this.className = (_this.className.match(/clicked/))? 'nav' : 'clicked';
}

//-->
</script>
<style type="text/css">
<!--

html,body {
	padding:0px;
	margin:0px;
}

#weg {
	width:80px;
	height:61px;
	border:0px;
	padding:0px;
	margin-top:-20px;
}

a.nav {
	background: #f00 url(about.png);
	width:80px;
	height:61px;
	font-size:54px;
	padding:0px;
	margin:0px;
}

a.nav:hover, a.clicked {
	background: #0f0 url(about-on.png);
	width:80px;
	height:61px;
	font-size:54px;
	padding:0px;
	margin:0px;
}
-->
</style>

</head>
<body>
<a href="#link1" class="nav" onclick="aktivieren(this)"><img src="spacer.png" id="weg"/></a>
<a href="#link2" class="nav" onclick="aktivieren(this)"><img src="spacer.png" id="weg"/></a>
<a href="#link3" class="nav" onclick="aktivieren(this)"><img src="spacer.png" id="weg"/></a>
<a href="#link4" class="nav" onclick="aktivieren(this)"><img src="spacer.png" id="weg"/></a>
</body>
</html>
Ciao
Quaese
 
Nein, mein Problem ist, dass ich für jeden Link einen eigenen Button + dazugehörigen hover-Status brauche. Ich weiß nicht in wie weit ich den Code dahingehend verändern soll.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück