tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
491
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 30.04.11 13:07 #1
    xistr xistr ist offline Grünschnabel
    Registriert seit
    Apr 2011
    Beiträge
    2
    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:

    <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>
     
    Zitieren Zitieren
  2. 30.04.11 15:08 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

    <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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 30.04.11 17:15 #3
    xistr xistr ist offline Grünschnabel
    Registriert seit
    Apr 2011
    Beiträge
    2
    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.
     
    Zitieren Zitieren
« Autocomplete Rückgabe werte löschen | TagName ist Null oder kein Objekt. Finde aber den Fehler nicht »

Ähnliche Themen

  1. Javascript aufklappbares Menü, Status speichern
    Von ferrari2k im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 09.10.08, 08:56
  2. Mit Javascript einen Javascript-Link einfügen (tinymce)
    Von ev0lst im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 18.12.07, 12:01
  3. OnMouseOver->window.status bei Link für NS, Firefox etc !?
    Von FRitter im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 15.12.04, 16:06
  4. Text bei Link in Status Bar?
    Von CantNo im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 27.06.02, 21:14
  5. Link visited status löschen
    Von Bitschupser im Forum CSS
    Antworten: 7
    Letzter Beitrag: 21.05.02, 12:48

Stichworte