Forum PHP.pl

[HTML] pobierz, plaintext 
<ul>
<li id="tab1" onclick="activetab(1);">menu1</li>
<li id="tab2" onclick="activetab(2);">menu2</li>
<li id="tab3" onclick="activetab(3);">menu3</li>
<li id="tab4" onclick="activetab(4);">menu4</li>
<li id="tab5" onclick="activetab(5);">menu5</li>
<li id="tab6" onclick="activetab(6);">menu6</li>
</ul>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
function activetab(e){
maxtab = 6;
tab = document.getElementById('tab'+e);
  for(i=1; i<=maxtab; i++){
    if(i==e){tab.setAttribute("id",'tab'+e+"a");} else {document.getElementById('tab'+i).setAttribute("id",'tab'+i);}
  }
}
[JAVASCRIPT] pobierz, plaintext 

Każda z zakładek ma inny kolor ustalony w css, chciałbym po kliknięciu zmienić jej styl na np. 'tab1a", "tab2a" itd. Jednak jeśli kliknę w inną zakładkę poprzednia powinna przejść do stanu pierwotnego, czyli "tab1", "tab2" ... Jednak mam z tym problem, ponieważ działa to tylko przy pierwszym kilknięciu, dla wybranej zakładki, reszta przestaje reagować.

Ten post edytował !*! 11.08.2010, 11:34:38

Wrzuć na jsfiddle.org i daj link, to zobaczymy co jest nie tak, pamietaj ze nikomu się nie chce kopiować tego co wklejasz.

Taki prosty algorytm - na początku funkcji dla dla wszystkich zakładek usuwamy klasę 'hover' - później dodajemy klasę hover dla aktywnej zakładki. W CSSie stylujesz sobie hover w powiązaniu z id elementu. Przemyśl to sobie i zaimplementuj. Twoja metoda też mogłaby pójść (przenieś zmienną tab gdzieś przed funkcję) ale jest bardziej pokręcona.

Całość prezntuje się mniej więcej tak:

http://jsfiddle.net/4N6wk/

Każdy z elementów li, ma inny kolor, po kliknięciu na niego ma zmienić kolor (każdy element zaznaczony li ma inny), a pozostałe elementy mają się resetować.

I jezeli masz 3 zakładki to jeżeli pętla będzie szukać tab6 to wywali błąd i koniec zabawy.

[JAVASCRIPT] pobierz, plaintext 
tab.setAttribute("id",'tab'+e+"a"); <--- tu zmieniasz id na tab1e
[JAVASCRIPT] pobierz, plaintext 

a dalej szukasz tab1

Ogólnie źle się do tego zabrałeś, no ale to temat na inna bajkę.

Ten post edytował skowron-line 11.08.2010, 14:33:14

A jak miałbym się do tego zabrać?

Zakładek jest 6, po prostu skróciłem to w przykładzie.



Poprawiłem, jednak nie resetują się inne zakładki.

Ten post edytował !*! 11.08.2010, 14:46:18

Powinieneś nadać ID dla ul i z niego wyjąć wszystkie LI wtedy skrypt sam bedzie wiedział ile jest zakładek


Przeczytaj jeszcze raz mój post
[quote]
tab.setAttribute("id",'tab'+e+'a');
[/qoute]

Kombinuję z tym nadal, jednak nie wiem jak uzyskać efekt końcowy... Teraz zmienia się każda pozycja po kolei, bez powrotu do stanu pierwotnego...

[JAVASCRIPT] pobierz, plaintext 
function activetab(e){
ultab = document.getElementById("ultab");
li = ultab.getElementsByTagName("li");
countli = li.length;
 
tab = document.getElementById('tab'+e);
getid = tab.getAttribute("id"); 
 
for(i=1; i<=countli; i++){
 
 if(i==e){
  if(getid == 'tab'+e){tab.setAttribute("id",'tab'+e+'a');}	else{if(getid == 'tab'+e+'a'){tab.setAttribute("id",'tab'+e+'a');}}
 }
  else{
   if(getid == 'tab'+e+'a'){document.getElementById('tab'+i).setAttribute("id",'tab'+i);}
 }
 
}
}
[JAVASCRIPT] pobierz, plaintext 

Ech, zrozum co to jest Event Object i jak go przekazać do funkcji to powinna ci działać

[JAVASCRIPT] pobierz, plaintext 
function highLight(event) {
   obj = event.target;
   childs = obj.parentNode.children;
   resetHighLight();
   addHighLight();
 
   function resetHighLight() {
      for (elem in childs) {
	 elem.className.replace('hover','');
      }
   }
   function addHighLight() {
      obj.className += ' hover';
   }
}
[JAVASCRIPT] pobierz, plaintext