Ostatnio widziałem użyteczny efekt na niektówych portalach, tzn. element strony z zakładkami. Klikanie na zakładki powoduje zmianę informacji w danym obszarze strony bez jej odświeżania. Ten typ interfejsu jest powszechnie stosowany w aplikacjach okienkowych (szczególnie przy funkcjach konfiguracyjnych) i sam bardzo często go stosuję.
Jak zobaczyłem to pomyślałem, by przetestować to rozwiązanie i w tym tekście postaram się przybliżyć do czego doszedłem.

Po krótkim zastanowieniu doszedłem do wniosku, że potrzebne będą mi trzy tablice. Pierwsza do przechowywania zawartości panelu, druga do zawierająca grafiki wyświetlane w przypadku gdy panel jest aktywny i trzecie z grafikami nieaktywnych paneli.
Mając zmienne nadszedł czas pomyśleć o jakichś funkcjach. Przydała by się jakaś, która odpowiada za zmianę aktywnego panelu.
Do dodawania nowych paneli również napisałem prostą funkcję.

<script  language="JavaScript">

//  tablica  z  zawartoscia  wyswietlanego  panelu
var  arrayTab  =  new  Array();

//  tablica  z  plikami  graficznymi  przy  aktywnym  panelu
var  imageTabOn  =  new  Array();

//  tablica  z  plikami  graficznymi  przy  nieaktywnym  panelu
var  imageTabOff  =  new  Array();

//  funkcja  to  do  zmiany  aktywnego  panelu
function  tabSwitch(numTab)
{
    var  imgName;

    //  podmiana  zawartosci
    document.getElementById("currentTab").innerHTML  =  arrayTab[numTab];

    //  i  petla,  ktora  ustawia  odpowiednie  obrazki
    for  (i  =  0;  i  <  arrayTab.length;  i++)
    {
        imgName  =  "tab"  +  i;
        if  (i  ==  numTab)
            document.images[imgName].src  =  imageTabOn[i];
        else
            document.images[imgName].src  =  imageTabOff[i];
    }
}

//  dodanie  nowego  panela
function  addTab(text,  imageOn,  imageOff)
{
    arrayTab.push(text);
    imageTabOn.push(imageOn);
    imageTabOff.push(imageOff);
}
</script> 

Kod co nieco może "toporny" ale działa. Następny krok to dodanie przykładowych paneli , tzn. zawartości oraz grafik.

<script>

    //  utworzenie  3  paneli

    var  p1  =  '  \
<p>  \
    tekst  nr  1<br><b>test</b>  \
</p>';

    var  p2  =  '  \
<p>  \
    tekst  nr  2  \
</p>';

    var  p3  =  '  \
<p>  \
    tekst  nr  3  <br>  \
    z  obrazkiem  <img  src="/china1/img/code/tab1_off.jpg">  \
</p>';

    addTab(p1,  "/china1/img/code/tab1_on.jpg",  "/china1/img/code/tab1_off.jpg");
    addTab(p2,  "/china1/img/code/tab1_on.jpg",  "/china1/img/code/tab1_off.jpg");
    addTab(p3,  "/china1/img/code/tab3_on.jpg",  "/china1/img/code/tab3_off.jpg");

</script> 

Teraz przydało by się coś zobaczyć i przyszedł czas na kawałek kodu html, który zamieszczony na stronie odpowiada za wyświetlanie panelu.

<!--  kod  html  panela  (tabelka)  -->

<a  name="tabPanel">

<table  border="0">
<tr>
    <td  align="left">
        <a  href="#tabPanel"  onClick="tabSwitch(0);">
<img  name="tab0"  src="/china1/img/code/tab1_off.jpg"  border="1"></a>
        <a  href="#tabPanel"  onClick="tabSwitch(1);">
<img  name="tab1"  src="/china1/img/code/tab2_off.jpg"  border="1"></a>
        <a  href="#tabPanel"  onClick="tabSwitch(2);">
<img  name="tab2"  src="/china1/img/code/tab3_off.jpg"  border="1"></a>
    </td>
</tr>
<tr>
    <td  style="background:  #ececff;  border:  solid  1px  #0000ff;  padding:  5px;">
        <!--  wlasciwa  zawartosc  panela  -->
        <div  id=currentTab  style="height:  200px;">
            nic
        </div>
    </td>
</tr>
</table>

<!--  koniec  panela  --> 

Jeszcze tylko zainicjowanie panela startowego.

<script>
    //  przelaczenie  na  panel  poczatkowy
    tabSwitch(0);
</script>