ajax che riscrive un attributo css

[f.domenella]

Ciao a tutti, vi espongo il mio quesito:
ho un box che 3 tab sotto, cliccando su un tab, uno script ajax mi carica il contenuto del box, solo che io vorrei che dopo che il tab è stato premuto cambiasse "colore", attualmente ho definito delle classi su foglio di stile, come è possibile modificare il "colore" con ajax?

[fcaldera]

visto che impostare una classe via javascript ti sposto sul forum relativo

[f.domenella]

Grazie, scusa, pensavo fosse più css.

nessuna idea su come risolvere il problema?

[Mega69]

document.getElementById("idtab").className="nuovaC lasse";


e l'esegui all onclick

[f.domenella]

ok così funziona, ma gli altri tab rimangono con lo stile della tab selezionata, come faccio a reimpostarli con la classe default?

[Mega69]

Cerchiamo di rendere questo script più efficiente

Metti tutti i tab ( e solo i tab ) in un div. I tab dovranno avere tutti lo stesso tag ( consiglio il tag a ), altrimenti sarebbe necessario crearsi un getElementsByClassName...

Dopodichè puoi usare uno script del genere:

window.onload=function() {

  document.getElementById("idDivCheContieneTab").onclick=function(evt) {
    evt=evt||window.event;
     var targetObj=evt.target||evt.srcElement,
     tabs=this.getElementsByTagName("a");
    for(var i=0, l=tabs; i!=l; i++)
      {
         if(tabs[i]!=targetObj) {
             tabs[i].className="classeNonCliccato";
         } else {
             tabs[i].className="classeCliccato";
                loadWithAjax(tabs[i].getAttribute("rel"));
         }
      }
  }

}

Gli attributi rel dei tag a dovranno contenere l'url da lanciare al click.

In linea di massima dovrebbe funzionare.

[f.domenella]

guarda ti posto il codiche dentro il file
ajax.js

var myRequest = null;

function CreateXmlHttpReq2(handler) {
  var xmlhttp = null;
  try {
    xmlhttp = new XMLHttpRequest();
  } catch(e) {
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function myHandler2() {
        
    if (myRequest.readyState == 2){
        e = document.getElementById("principale_box");
        e.innerHTML='<div align="center">


Attendi il caricamento</div>';
        
        
    }
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        e = document.getElementById("principale_box");
        e.innerHTML = myRequest.responseText;
    }
}

function boxPrincipaleLoadContent(href_link,id_link) {
    var href = href_link;
    var id = id_link;
    var r = Math.random();
  
    myRequest = CreateXmlHttpReq2(myHandler2);
     
    myRequest.open("GET","boxCentrale.php?content="+href+"&rand="+escape(r));
    myRequest.send(null);

} 

che viene richiamato dal div che contiene una lista( le tab in questione)

<div id="navigation">
        <ul>
            <li id="evidenzalink1">[url="index.php"]In Evidenza[/url]
             <li id="evidenzalink2">[url="index.php"]VideoGallery[/url]
              <li id="evidenzalink3">[url="index.php"]Ambulatori[/url]
               <li id="evidenzalink4">[url="index.php"]Orari[/url]
        
        [/list]
        </div> 

come puoi notare nell'onclick c'è il richiamo alla funzione ajax, come posso integrare il tuo codice nei miei?

sai non sono un granché con js-ajax

[Mega69]

Vabè, fai così allora:

window.onload=function() {

  document.getElementById("navigation").onclick=function(evt) {
    evt=evt||window.event;
     var targetObj=evt.target||evt.srcElement,
     tabs=this.getElementsByTagName("a");
    for(var i=0, l=tabs; i!=l; i++)
      {
         if(tabs[i]!=targetObj) {
             tabs[i].className="classeNonCliccato";
         } else {
             tabs[i].className="classeCliccato";
               settaAJAX(tabs[i].href, tabs[i].id)
         }
      }
     return false;
  }

}

function settaAJAX(hr_l, id_l) {
boxPrincipaleLoadContent(hr_l, id_l)
}

e questo lo metti in un file esterno.

Questo invece il markup:

<div id="navigation">
 
         In Evidenza
             VideoGallery
              Ambulatori
               Orari
        
        
        </div>

Non ti posso dire con certezza se funzioni poichè non ho avuto il tempo di provarlo.