[javascript]: onClick rückgängig machen

[captainthriller]

Hallo alle zusammen,

ich habe einen content slider umgewandelt und für mich angepasst.
Dieser basiert auf Javascript und damit fange ich mehr oder weniger gerade erst an.

Hier gibt es buttons unterhalb des Sliders und diese sollen über <.. class="button active"> (über "active") markiert werden, wenn sie aufgerufen werden.
dies könnte ich mit der javascript funktion onClick machen und die klasse ändern...
wenn ich nun aber auf den nächsten button klicke, sollte der vorher aufgerufene nicht mehr aktiv sein, sprich ich müsste die onClick Funktion irgendwie rückgängig machen.

Kann mir da jemand auf die Sprünge helfen?
Habe schon ein paar Sachen gegoogelt... aber wirklich hilfreich war das leider nicht...

Vielen Dank schonmal...

 <div style="float:left; margin-left:280px;"><a href="#1" class="cross-link">01</a></div>
			<div style="float:left;"><a href="#2" class="cross-link active2">02</a></div>
			<div style="float:left;"><a href="#3" class="cross-link">03</a></div>

onClick habe ich noch nicht eingebaut ... war nur eine Überlegung

 

[stroyer]

AW: [javascript]: onClick rückgängig machen

Du erstellst eine globale Variable, in der gespeichert wird, welcher Button gedrückt wurde.
Sobald ein Button gedrückt wird und die globale Variable einen gültigen Inhalt hat, gibst du dort die Classe active wieder raus.

Wenn du einen hover Effekt haben willst, würde ich dir eher onmouseover und onmouseout empfehlen (für jeden Button)
bei onmouseover einfach this.className='button active'; und bei onmouseout this.className='button';

 

[captainthriller]

AW: [javascript]: onClick rückgängig machen

Danke für die Tipps... ich muss nur erst mal wissen wie man soetwas umsetzt ...

gibt es sowas wie das php manual nur halt für javascript? also mit den befehlen und die beschreibung dazu?

den mouseover effekt habe ich mit css gemacht ... nur die seite wird halt nicht neugeladen mit dem slide ... deshalb keine active markierung mit css

 

[MyBad]

AW: [javascript]: onClick rückgängig machen

Soll die Seite denn neu geladen werden? Wenn ja kannst du das ja auch mit php lösen. Wenn sie nicht neu geladen werden soll, dann musst du es so wie stroyer geschrieben hat lösen.

 

[captainthriller]

AW: [javascript]: onClick rückgängig machen

ja der lösungsansatz ist der richtige ...
nur leider bin ich noch nicht so weit, dass ich weiss wie ich das aufbauen muss und wo ich welche variable setzen muss...
javascript ist erst seit kurzem zu meinem interessensgebiet geworden

 

[MyBad]

AW: [javascript]: onClick rückgängig machen

Google ist dein Freund! "javascript globale Variablen"

Google

 

[captainthriller]

AW: [javascript]: onClick rückgängig machen

Danke für eure Hilfe...

google ist mein freund ... nur mit den globalen variabeln hat mir bisher nicht weiter geholfen...

wenn ihr mir jetzt noch weiter helfen wollt, könnte ich noch eine variante gebrauchen, bei der ich nicht immer per hand in der javascript funktion buttons hinzufügen muss.

Hier meine Lösung:

function schalter (x) {
	document.getElementById(1).className='cross-link';
	document.getElementById(2).className='cross-link';
	document.getElementById(3).className='cross-link';
	document.getElementById(4).className='cross-link';
	document.getElementById(5).className='cross-link';
	document.getElementById(6).className='cross-link';
	document.getElementById(7).className='cross-link';
	document.getElementById(x).className='cross-link active2';
}

<div style="float:left;"><a href="#1" onClick="schalter(1);" id="1" class="cross-link">01</a></div>
<div style="float:left;"><a href="#2" onClick="schalter(2);" id="2" class="cross-link">02</a></div>
<div style="float:left;"><a href="#3" onClick="schalter(3);" id="3" class="cross-link">03</a></div>
<div style="float:left;"><a href="#4" onClick="schalter(4);" id="4" class="cross-link">04</a></div>
<div style="float:left;"><a href="#5" onClick="schalter(5);" id="5" class="cross-link">05</a></div>
<div style="float:left;"><a href="#6" onClick="schalter(6);" id="6" class="cross-link">06</a></div>
<div style="float:left;"><a href="#7" onClick="schalter(7);" id="7" class="cross-link">07</a></div>

Das ist sicherlich nicht die feinste Art... aber vorerst funktioniert es.

 

[stroyer]

AW: [javascript]: onClick rückgängig machen

Folgendes müsste gehen:

function schalter(x)
  {
    var i=0;
    var el;
    while(true)
      {
        i++;
        if(el=document.getElementById('button'+i))
          {
            if(i==x)
              {
                el.className='cross-link active2';
              }
            else
              {
                el.className='cross-link';
              }
          }
        else
          {
            break;
          }
      }
  }

Da brauchst du nichts anzugeben.

Übrigens: Als ID nur eine Zahlwürde ich nicht nehmen.