<script type="text/javascript">
function varie(numero)
{
if (numero ==1)
{
element1.style.visibility = 'visible';

}
if (numero ==3)
{
element3.value = 'coucou';

}
}
</script>

<!-- Les id servent à javascrit et doivent être uniques, contrairement aux name qui servent à HTML -->
<div id="element" class="element">
        <div class="selection">
            <ul>
                <li><a href="#element-1">
						<!--Suppression de l'id element qui ne sert à rien-->
                        <div class="choix"><input  onclick ="varie(1)" type="radio" name="choix" value="1" class="switch" data-reponse=""></div>
						<!-- Modification de la div-->
                        <div class="texte-1" id ="element1" style ="visibility :hidden" >text-1</div>
                        <div class="clear"></div>
                    </a>
                </li>
                <li><a href="#element-2">
                        <div class="choix"><input type="radio" name="choix" value="2" class="switch" data-reponse=""></div>
                        <div class="texte-2" id ="element2" style ="visibility :hidden">text-2</div>
                        <div class="clear"></div>
                    </a>
                </li>
                <li><a href="#element-3">
                        <div class="choix"><input id="element" onclick ="varie(3)" type="radio" name="choix" value="3" class="switch" data-reponse=""></div>
                        <div class="texte-3"><input type ="text" id ="element3" value = "option3" /></div>
                        <div class="clear"></div>
                    </a>
                </li>
            </ul>
        </div>
 

Si j'ai bien compris, voici deux pistes:
[html]


<script type="text/javascript">
function varie(numero)
{
if (numero ==1)
{
element1.style.visibility = 'visible';

}
if (numero ==3)
{
element3.value = 'coucou';

}
}
</script>

<!-- Les id servent à javascrit et doivent être uniques, contrairement aux name qui servent à HTML -->
<div id="element" class="element">
<div class="selection">
<ul>
<li><a href="#element-1">
<!--Suppression de l'id element qui ne sert à rien-->
<div class="choix"><input onclick ="varie(1)" type="radio" name="choix" value="1" class="switch" data-reponse=""></div>
<!-- Modification de la div-->
<div class="texte-1" id ="element1" style ="visibility :hidden" >text-1</div>
<div class="clear"></div>
</a>
</li>
<li><a href="#element-2">
<div class="choix"><input type="radio" name="choix" value="2" class="switch" data-reponse=""></div>
<div class="texte-2" id ="element2" style ="visibility :hidden">text-2</div>
<div class="clear"></div>
</a>
</li>
<li><a href="#element-3">
<div class="choix"><input id="element" onclick ="varie(3)" type="radio" name="choix" value="3" class="switch" data-reponse=""></div>
<div class="texte-3"><input type ="text" id ="element3" value = "option3" /></div>
<div class="clear"></div>
</a>
</li>
</ul>
</div>
[/html]

Salut,

Une balise <a> ne doit normalement contenir aucun élément interactif : button, input, a, etc...

Puisque tu utilises déjà javascript pour charger tes pages, tu peux également utiliser javascript pour ajouter une classe css spécifique sur le lien qui vient d'être cliqué. Tu pourras alors styliser à tes souhaits le lien actif via la classe css ajoutée.
Pour faire ceci avec jQuery, tu auras besoin des fonctions suivantes :
- http://api.jquery.com/click/
- http://api.jquery.com/toggleclass/

Bon développement ;)

Bonjour,

Je suis en train de réaliser un "menu" pour naviguer sur mon site en restant sur la meme page.

Je m'explique,
J'ai une zone de sélection avec quatre élément contenu dans un ensemble. Des que je clique sur un élément, un texte différents s'affiche tout en restant sur ma page grace a du javascript. La sélection des éléments se fait par une balise <a>. Cependant j'aimerai mettre un input en plus pour que l'usage voit plus clairement ou il se situe.

Quand je le met il ne se remplit pas avec la sélection de la balise <a> de plus il ne change pas en fonction de l'élément sélectionné.

Pouvez vous m'aidez ?

[code]<div id="element" class="element">
<div class="selection">
<ul>
<li><a href="#element-1">
<div class="choix"><input id="element" type="radio" name="choix" value="1" class="switch" data-reponse=""></div>
<div class="texte-1">text-1</div>
<div class="clear"></div>
</a>
</li>
<li><a href="#element-2">
<div class="choix"><input id="element" type="radio" name="choix" value="2" class="switch" data-reponse=""></div>
<div class="texte-2">text-2</div>
<div class="clear"></div>
</a>
</li>
<li><a href="#element-3">
<div class="choix"><input id="element" type="radio" name="choix" value="3" class="switch" data-reponse=""></div>
<div class="texte-3">text-3</div>
<div class="clear"></div>
</a>
</li>
</ul>
</div>[/code]

et le javascript

[code]$(function() {
$( "#element" ).tabs({
collapsible: true
});
});[/code]

Merci