modifier le html à l'aide de javascript

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
<http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html>,
<http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html> et
éventuellement <http://www.w3.org/TR/DOM-Level-3-Events/events.html>.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

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 ...
<http://developer.mozilla.org/fr/docs/DOM:element.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 ?
<http://doc.domainepublic.net/php/doc.php.long/function.dom-domnode-issamenode.html>

{
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

SAM a écrit :

Je n'ai pas bien compris à quoi pouvait servir ce ownerDocument ...
<http://developer.mozilla.org/fr/docs/DOM:element.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
<http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-isSameNode>
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

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

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
<http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html>,
<http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html> et
éventuellement <http://www.w3.org/TR/DOM-Level-3-Events/events.html>.

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é.

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

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