Javascript, questions sur les 'class'

Javascript, questions sur les 'class' - HTML/CSS - Programmation

Marsh Posté le 13-05-2008 à 21:07:48    

Bonjour,
 
Je me suis mit récemment à coder quelques pages web pour m'initier et je suis tombé sur un petit problème que je n'arrive pas à régler.
 
 
 
Je cherche à faire 4 onglets latéraux proposant 4 chemins, qui changent d'aspect au passage de la souris (avec onMouseOver et onMouseOut j'ai compris ça) mais lorsque je cliques sur un onglet (onclick) l'onglet dois être d'un aspect différent (éclairé notamment) à la page suivante (j'intègre dans les différentes pages avec un include le script contenant les onglets).
 
Cependant je n'arrive pas à faire en sorte que l'onglet soit éclairé (via une image) sur la page voulue : je veux gérer l'arrière plan des onglets avec des images en changeant la 'class' de ma balise mais je n'y arrive pas : c'est au moment 'onload' mais je n'arrive pas à l'intégrer.
 
Voici le code d'un de mes onglets :
 

Citation :


<td>
<table id="onglet1" class="" onMouseOver="tabOver(this)" onMouseOut="tabOut(this)" onclick='return outerClick(this,"http://www.monsite.com/page1/", "" )'><tbody><tr><td class="tab_left"></td>
<td class="tab_right"><span>Blog</span></td>
</tr></tbody></table>
</td>


 
Je cherche un moyen de donner un nom à 'class' lors du chargement de la page (en javascript) afin de lui attribuer une valeur en fonction de l'onglet cliqué sur la page précédente.
 
Merci d'avance pour votre aide car j'en ai besoin !
 
 
Feolel.

Reply

Marsh Posté le 13-05-2008 à 21:07:48   

Reply

Marsh Posté le 14-05-2008 à 11:43:19    

J'ai trouvé ma réponse en affectant une fonction javascript au chargement de la page (avec un onload au niveau du body).
 
Le code donne ça :
 

Citation :


var paramArray=window.location.search.substr(1).split("&" );
function affectationclass(){
 var param=unescape(paramArray[0]);
 switch (param) {
  case "param1=1":
   document.getElementById("tab1" ).className = "current";
   break;
  case "param1=2":
   document.getElementById("tab2" ).className = "current";
   break;
  case "param1=3":
   document.getElementById("tab3" ).className = "current";
   break;
  case "param1=4":
   document.getElementById("tab4" ).className = "current";
   break;
  case "param1=5":
   document.getElementById("tab5" ).className = "current";
   break;
  case "param1=6":
   document.getElementById("tab6" ).className = "current";
   break;
  case "param1=7":
   document.getElementById("tab7" ).className = "current";
   break;
  case "param1=8":
   document.getElementById("tab8" ).className = "current";
   break;
  case "param1=9":
   document.getElementById("tab9" ).className = "current";
   break;
  case "param1=10":
   document.getElementById("tab10" ).className = "current";
   break;
  case "param1=11":
   document.getElementById("tab11" ).className = "current";
   break;
  case "param1=12":
   document.getElementById("tab12" ).className = "current";
   break;
  default:
   alert("Error" );
   break;
 }
}


 
Cependant, en exécutant ce script en onload du body, j'ai un petit décalage et mon image s'affiche comme à l'origine durant une fraction de secondes avant de prendre le background voulu.
 
 
Ainsi j'ai une autre question : y a-t-il un moyen de corriger ce petit 'bug' en effectuant cette fonction au niveau du tableau qui contient les onglets ?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed