Apparition de texte avec boutons
Debutant
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
Voilà mon problème, j'aimerais créer plusieurs bouton en haut de ma page, qui lorsque l'on clique sur un bouton, un texte apparaît + un autre bouton, qui lorsque l'on clique sur lui un texte apparaît seulement. Ce système texte+bouton doit apparaître sur tous mes boutons en haut.
Voilà mon problème, j'aimerais créer plusieurs bouton en haut de ma page, qui lorsque l'on clique sur un bouton, un texte apparaît + un autre bouton, qui lorsque l'on clique sur lui un texte apparaît seulement. Ce système texte+bouton doit apparaître sur tous mes boutons en haut.
<style>
button.btnmateriel{
font-size: 1.5em;
padding: 5px;
}
.onglet{
display:none;
width:100%;
min-height:60px;
padding:10px;
margin :5px;
border : 0px solid black;
}
.active{
background-color : green;
}
</style>
<body>
<center>
<section class="boutique">
<p>
<button class="btnmateriel active" id="btn_1" data-onglet="1" >Test 1</button>
<button class="btnmateriel" id="btn_2" data-onglet="2" >Test 2</button>
</p>
<div class="div_onglets">
<div id="onglet_1" class="onglet">
<p>
Chien ou chat ?
</p>
<section class="boutique">
<p>
<button class="btnmateriel" id="btn_3" data-onglet="3" >Chien</button>
<button class="btnmateriel" id="btn_4" data-onglet="4" >Chat</button>
</p>
<div id="onglet_3" class="onglet">
<p>
Texte 2
</p>
</div>
<div id="onglet_4" class="onglet">
<p>
Texte 3
</p>
</div>
</section>
</div>
<div id="onglet_2" class="onglet">
<p>
Ceci est l'onglet N° 2
</p>
</div>
</div>
</section>
<script type="text/javascript">
function hideAllElementByClassNam(clName){
var onglets = document.getElementsByClassName("onglet");
//on masque tous les onglets
for (var i = 0; i < onglets.length; i++) {
onglets[i].style.display = 'none';
}
}
function ShowElementById(idElm){
document.getElementById(idElm).style.display = "inline-block";
}
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i < cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnmateriel active";
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');
}
var DisplayHideOnglets = function() {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher
var NumOnglet = this.getAttribute("data-onglet");
//on affiche l'onglet
if(typeof(NumOnglet) !="undefined" && NumOnglet!=null){
ShowElementById("onglet_"+NumOnglet);
addClassActiveElm("btn_"+NumOnglet);
}
};
function initListener(){
//on ajoute le listener
var cl_btnmateriel = document.getElementsByClassName("btnmateriel");
for (var i = 0; i < cl_btnmateriel.length; i++) {
cl_btnmateriel[i].addEventListener('click', DisplayHideOnglets, false);
}
}
//Initialisation
initListener();
//par défaut.. on affiche le premier onglet
ShowElementById("onglet_1");
</script>
EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).
Explications disponibles ici :ICIMerci d'y penser dans tes prochains messages.Jordane45 |
A voir également:
- Apparition de texte avec boutons
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Comment réinitialiser un téléphone avec les boutons - Guide
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Traitement de texte gratuit - Guide
