linguetta con caricamento funzioni

[SoulStorm892]

Dunque, dunque...

Le schede le puoi creare come una serie di div flottanti:

<div id="menu">
  <div id="tab1" style="float:left;" onclick="selectTab(1);" onmouseover="over(this);" onmouseout="out(this);">item1</div>
  <div id="tab2" style="float:left;" onclick="selectTab(2);">item2</div>
  <div id="tab3" style="float:left;" onclick="selectTab(3);">item3</div>
</div> 

Puoi aggiungere ai div gli eventi onmouseover e onmouseout per gestire il fatto che l'utente posi il mouse sulle schede (nell'esempio l'ho applicato solo alla prima).

function over(tag) //mouse sull'elemento
{
  tag.style... //imposta grafica particolare quando il mouse è sull'elemento
}
function out(tag) //mouse esce dall'elemento
{
  tag.style... //resetta grafica di defaul per l'elemento
} 

Tramite l'attributo style del div puoi cambiargli la grafica a piacimento. Puoi anche lavorare con img al posto di div e cambiare l'attributo src. (Questi effetti possono essere fatti anche con i css anzichè con funzioni JS ma non sono pienamente compatibili).

Quando l'utente clicca sulla scheda si attiva la funzione selectTab:

function selectTab(tab)
{
  switch(tab)
  {
     case 1: showTab1(); return;
     case 1: showTab2(); return;
     case 1: showTab3(); return;
  }
} 

La funzione tramite switch chiamerà la funzione specifica per gestire la data scheda.

A questo punto ha bisogno che si evochi una finestrella (dialog) con all'interno del codice!
Comincia con l'inserire questo div nella tua pagina index principale:

<div id="dialog" style="display:none; position:fixed;"></div> 

Questo tramite display none sarà invisibile fino a quando lo chiameremo.
Torniamo a showTab1 e leghiamo le cose:

function showTab1()
{
  var dialog = document.getElementById("dialog"); //collegamento al div dialog
  dialog.style.left = "100px"; //posizione x del dialog evocato
  dialog.style.top = "50px"; //posizione y del dialog evocato
  dialog.style.display = "block"; //mostra dialog
  
  //INSERIRE HTML NEL DIALOG

} 

Al posto dell'ultimo commento (INSERIRE HTML NEL DIALOG) puoi usare due tipi di codici in base all'esigenza. Se necessiti di semplice html ti basterà fare questo:

  dialog.innerHTML = "[i]sono la prima scheda[/i]"; 

Se invece vuoi inserire del php (o meglio: html generato tramite php ) devi necessariamente fare una chiamata AJAX e l'intera funzione prenderà queste sembianze:

function showTab1()
{
  var dialog = document.getElementById("dialog"); //collegamento al div dialog
  dialog.style.left = "100px"; //posizione x del dialog evocato
  dialog.style.top = "50px"; //posizione y del dialog evocato
  dialog.style.display = "block"; //mostra dialog
  
  var xmlhttp = window.XMLHttpRequest? new XMLHttpRequest() : new   ActiveXObject("Microsoft.XMLHTTP"); //ajax
  xmlhttp.open("POST","tagHandler.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.setRequestHeader("Content-length",1);
  xmlhttp.setRequestHeader("Connection","close");

  xmlhttp.onreadystatechange=function()
  {
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
           dialog.innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.send("tab=1");
} 

Lavorando con il metodo post puoi anche bypassare la precedente funzione con lo switch e mandare direttamente la richiesta di tab attraverso il metodo POST.

Ricordati poi di impostare una via di uscita per la dialog (X in alto a destra o chiudendola se l'utente seleziona qualcosa al suo interno:

function closeDialog()
{
  document.getElementById("dialog").style.display = "none";
} 

Ok, penso sia tutto. Ho battuto il codice a mano quindi ci sarà sicuramente qualche errorino, sepro tu abbia capito la logica di lavoro