[Javascript] tab kleur vastzetten na Onclick

[klaaz]

Ik heb de volgende code gebouwd om d.m.v. tabs een pagina inhoud te kunnen wijzigen:

code:

<script language="javascript">
showRow = (navigator.appName.indexOf("Internet Explorer") != -1) ? "block" : "table-row";

function flipCell(countt){
  a = document.getElementById("taalnl"); 
  b = document.getElementById("taalde"); 
     
if (countt == 1){
  a.style.display = (a.style.display == "block") ? showRow : "block";
  b.style.display = "none";
  }
if (countt == 2){
  a.style.display = "none";
  b.style.display = (b.style.display == "block") ? showRow : "block";
  }
}
</script>

<!-- tabs -->
<table border="0" cellpadding="0" cellspacing="0" height="20">
  <tr>
    <td height="20" onmouseover="this.style.background='#808080';" onmouseout="this.style.background='#E0DFE3';" 
      onclick="flipCell(1);this.style.background='#808080';" nowrap>
      Pagina NL
    </td>
    <td height="20" onmouseover="this.style.background='#808080';" onmouseout="this.style.background='#E0DFE3';" 
      onclick="flipCell(2);this.style.background='#808080';" nowrap>
      Pagina DE
    </td>
  </tr>
</table>

<!-- pagina's -->
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr style="display:block" id="taalnl">
    <td>
      DE gedeelte
    </td>
  </tr>
  <tr style="display:none" id="taalde"> 
    <td>
      DE gedeelte
    </td>
  </tr>
</table>

Dit werkt prima. Wat ik alleen niet voor elkaar krijg is dat de geselecteerde TAB de donkergrijze kleur aanhoud wanneer deze geselecteerd is (OnClick). De pagina wordt dus wel keurig gewisseld, alleen de tab zelf wordt weer lichtgrijs door het OnMouseout event. Ik heb al van alles geprobeerd, zelfs de HTML waarin de tabregels omschreven worden in een DIV laten vervangen door INNERHTML.

Ben een beginner op het gebied van Javascript, meestal lukt het me wel maar hier kom ik niet echt uit. Iemand een idee?

[ Voor 18% gewijzigd door klaaz op 12-01-2005 14:16 ]

[Rhapsody]

Ik zou met CSS classes gaan werken dan
Je kunt dan heel eenvoudig met javascript werken en dan de (CSS) className dynamisch veranderen.

zo dus:

JavaScript:

document.getElementById(id).className = "active";

[ Voor 20% gewijzigd door Rhapsody op 12-01-2005 14:19 ]

[klaaz]

Daar heb ik ook al aan gedacht:

code:

    <td id="nl" height="20" onmouseover="this.style.background='#808080';" onmouseout="this.style.background='#E0DFE3';" 
      onclick="flipCell(1);this.style.background='#808080';" nowrap>
      Pagina NL
    </td>
    <td id="de" height="20" onmouseover="this.style.background='#808080';" onmouseout="this.style.background='#E0DFE3';" 
      onclick="flipCell(2);this.style.background='#808080';" nowrap>
      Pagina DE
    </td>


<knip>

    <td height="20" onmouseover="this.style.background='#808080';" onmouseout="this.style.background='#E0DFE3';" 
      onclick="flipCell(1);document.getElementById(de).style.backgroundColor = '#E0DFE3';" nowrap>
      Pagina NL
    </td>
    <td height="20" onmouseover="this.style.background='#808080';" onmouseout="this.style.background='#E0DFE3';" 
      onclick="flipCell(2);document.getElementById(nl).style.backgroundColor = '#E0DFE3';" nowrap>
      Pagina DE
    </td>

Dit werkt niet... Dus ik doe iets fout denk ik

[klaaz]

mmmmm, ben eruit! Dank zij Rhapsody

code:

<style>
.active {
 background-color:#808080;
 }
.inactive {
 background-color:#E0DFE3;
 }
</style>
                    
<span id="nl" valign="middle" class="active" onclick="flipCell(1); this.className='active'; document.getElementById('de').className='inactive';">&nbsp;Pagina NL&nbsp;[img]"images/vlaggen/vlaggen_mini_nl.gif"></span>
                            
<span[/img]&nbsp;Pagina DE&nbsp;[img]"images/vlaggen/vlaggen_mini_de.gif"></span[/img]

[Rhapsody]

Scheelt ook heleboel code