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 :
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') ;
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>.
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') ;
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>.
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') ;
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>.
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>
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)
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>
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)
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>
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 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.
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.
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.
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') ;
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é.
Mickaël Wolff a écrit :
Freegate a écrit :
j'ai une seule et même page avec 3 onglets sous la forme HTML suivante:
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') ;
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
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') ;
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é.
tfeserver
Freegate wrote:
Bonjour,
j'ai une seule et même page avec 3 onglets sous la forme HTML suivante:
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 :
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
Freegate wrote:
Bonjour,
j'ai une seule et même page avec 3 onglets sous la forme HTML suivante:
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 :
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.
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 :
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
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 ?