modifier le html à l'aide de javascript

Le
Freegate
Bonjour,

j'ai une seule et même page avec 3 onglets sous la forme HTML suivante:

<li id='current'>toto1</a></li>
<li>toto2</a></li>
<li>toto3</a></li>

Au chargement de la page l'onglet par défaut est "toto1" auquel un
style current est défini.

J'aimerais à l'aide Javascript, cliquer l'onglet toto2 et faire en
sorte que le id='current' passe de toto1 à toto2 afin que le style
"current" s'applique à l'onglet toto2. Le code html serait alors :

<li>toto1</a></li>
<li id='current'>toto2</a></li>
<li>toto3</a></li>

Malheureusement je n'ai aucune idée sur comment coder ça en javascript.

Pouvez me mettre sur une piste ?

Merci
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Mickaël Wolff
Le #9538011
Freegate a écrit :

j'ai une seule et même page avec 3 onglets sous la forme HTML suivante:

<li id='current'>toto1</a></li>
<li>toto2</a></li>
<li>toto3</a></li>



Je crois que tu as oublié deux ou trois choses :) Du genre, balise
ouvrante.

Au chargement de la page l'onglet par défaut est "toto1" auquel un style
current est défini.



Alors non. Le style que tu as défini s'applique à l'élément
d'identifiant 'current', mais ce n'est pas le le style 'current'.

J'aimerais à l'aide Javascript, cliquer l'onglet toto2 et faire en sorte
que le id='current' passe de toto1 à toto2 afin que le style "current"
s'applique à l'onglet toto2. Le code html serait alors :




Par exemple, dans la section javascript :

function set_current(tab, ev)
{
var current = tab.ownerDocument
.getElementById('current') ;

if(!current.isSameNode(tab))
{
current.removeAttribute('id') ;
tab.id = 'current' ;
}
}

Pour pouvoir l'utiliser dans ton HTML :
<li onclick='set_current(this, event)'>Onglet 1</li>

Si tu veux aller plus loin, je te conseille de consulter
éventuellement
--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
SAM
Le #9657761
Mickaël Wolff a écrit :
Freegate a écrit :

j'ai une seule et même page avec 3 onglets sous la forme HTML suivante:

<li id='current'>toto1</a></li>
<li>toto2</a></li>
<li>toto3</a></li>
J'aimerais à l'aide Javascript, cliquer l'onglet toto2 et faire en sorte
que le id='current' passe de toto1 à toto2



Par exemple, dans la section javascript :

function set_current(tab, ev)
{
var current = tab.ownerDocument



Je n'ai pas bien compris à quoi pouvait servir ce ownerDocument ...
Qu'est-ce finalement ce ownerDocument ? (différence d'avec document ?)

quel avantage par rapport à faire directement :

var current = document.getElementById('current') ;

??

.getElementById('current') ;

if(!current.isSameNode(tab))



ce n'est pas du PHP ?

{
current.removeAttribute('id') ;
tab.id = 'current' ;
}
}



Bon ici : à quoi bon ?
va-ce utiliser plus de ressources à faire directement :
current.removeAttribute('id') ;
tab.id = 'current' ;
même si ce n'est pas utile (on est déjà sur le bon tab)


function set_current(tab)
{
if( !tab.id || tab.id != 'current')
{
document.getElementById('current').removeAttribute('id') ;
tab.id = 'current' ;
}
}

<li onclick='set_current(this)'>Onglet 1</li>


--
sm
Mickaël Wolff
Le #9659861
SAM a écrit :

Je n'ai pas bien compris à quoi pouvait servir ce ownerDocument ...
Qu'est-ce finalement ce ownerDocument ? (différence d'avec document ?)



Aucune différence ici. Mais j'ai l'habitude d'utiliser ownerDocument
pour être certain de manipuler le bon arbre. Par exemple, si tu utilises
le XHR, ou si tu diriges un iframe, ça peut être intéressant d'avoir des
méthodes généralistes pour manipuler les n½uds selon leur propriétaire.

quel avantage par rapport à faire directement :
var current = document.getElementById('current') ;
??



Hormis la généricité, aucune :)

.getElementById('current') ;

if(!current.isSameNode(tab))



ce n'est pas du PHP ?



Non, du DOM
bien normalisé ;)

Bon ici : à quoi bon ?


[...]
va-ce utiliser plus de ressources à faire directement :
current.removeAttribute('id') ;
tab.id = 'current' ;
même si ce n'est pas utile (on est déjà sur le bon tab)



Je préfère ne rien faire quand ce n'est pas utile, pour ne pas avoir
de (mauvaise) surprise.

function set_current(tab)



En enlevant le second argument, tu perds l'opportunité de pouvoir
adapter le comportement en fonction de l'événement. C'est pour ça que je
le mets systématiquement.

Pour le reste c'est équivalent en fait :) Et puis c'était à titre
d'illustration.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Mickaël Wolff
Le #9662141
Juste pour corriger un oubli :

Mickaël Wolff a écrit :
function set_current(tab, ev)
{
var current = tab.ownerDocument
.getElementById('current') ;



if(current && !current.isSameNode(tab))
{
current.removeAttribute('id') ;
}


tab.id = 'current' ;
}



Sinon ça fait une erreur si le n½ud current n'existe pas.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Freegate
Le #10181941
Mickaël Wolff a écrit :
Freegate a écrit :

j'ai une seule et même page avec 3 onglets sous la forme HTML suivante:

<li id='current'>toto1</a></li>
<li>toto2</a></li>
<li>toto3</a></li>



Je crois que tu as oublié deux ou trois choses :) Du genre, balise
ouvrante.

Au chargement de la page l'onglet par défaut est "toto1" auquel un style
current est défini.



Alors non. Le style que tu as défini s'applique à l'élément
d'identifiant 'current', mais ce n'est pas le le style 'current'.

J'aimerais à l'aide Javascript, cliquer l'onglet toto2 et faire en sorte
que le id='current' passe de toto1 à toto2 afin que le style "current"
s'applique à l'onglet toto2. Le code html serait alors :




Par exemple, dans la section javascript :

function set_current(tab, ev)
{
var current = tab.ownerDocument
.getElementById('current') ;

if(!current.isSameNode(tab))
{
current.removeAttribute('id') ;
tab.id = 'current' ;
}
}

Pour pouvoir l'utiliser dans ton HTML :
<li onclick='set_current(this, event)'>Onglet 1</li>

Si tu veux aller plus loin, je te conseille de consulter
éventuellement


Merci beaucoup ça m'a pris beaucoup de temps pour comprendre comment ça
marche !! Mais c'est bon maintenant

Merci à Sam car son code simplifié m'a éclairé.
tfeserver
Le #10853471
Freegate wrote:
Bonjour,

j'ai une seule et même page avec 3 onglets sous la forme HTML suivante:

<li id='current'>toto1</a></li>
<li>toto2</a></li>
<li>toto3</a></li>

Au chargement de la page l'onglet par défaut est "toto1" auquel un style
current est défini.

J'aimerais à l'aide Javascript, cliquer l'onglet toto2 et faire en sorte
que le id='current' passe de toto1 à toto2 afin que le style "current"
s'applique à l'onglet toto2. Le code html serait alors :

<li>toto1</a></li>
<li id='current'>toto2</a></li>
<li>toto3</a></li>

Malheureusement je n'ai aucune idée sur comment coder ça en javascript.

Pouvez me mettre sur une piste ?

Merci





Je dois être le seul à trouver cela bizarre, mais changer l'id d'un
element me parait pas très adapté.
Je suppose que tu désires changer l'id de la balise li afin de changer
son style. Pourquoi ne pas utiliser plutot l'attribut class?

l'Id étant par définition unique, utiliser un meme id pour 2 elements
(meme si tu le supprimes) me semble un peu moyen.

--
tfe
http://www.tfeserver.be
Mickaël Wolff
Le #10853561
tfeserver a écrit :

Je dois être le seul à trouver cela bizarre, mais changer l'id d'un
element me parait pas très adapté.



Au début aussi j'avais trouvé cette approche contestable. Mais après
réflexion, c'est tout à fait adapté. Qu'est-ce qui te gêne ?

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Publicité
Poster une réponse
Anonyme