Systeme d'onglet

Par FrenchGaming Team, il y a 9 ans

Javascript

Bonsoir,

Je suis entrain de créer un systeme d'onglet le probléme c'est que sa fonctionne jusqu'a que le contenu de la div correpondant a l'onglet disparrait mais sa n'affiche pas l'autre contenu.

Code Html

<div> <ul class="nav nav-tabs nav-cod"> <li class="active"><a href="#commande">Commande (4)</a></li> <li><a href="#commandecour">Commande En Cour (5)</a></li> <li><a href="#commandetermine">Commande Terminé (0) </a></li> </ul> <div class="tabs-contents"> <div class="tabs-content active" id="#commande"> commende total </div> <div class="tabs-content" id="#commandecour" > commande en cour </div> <div class="tabs-content" id="#commandetermine"> commande recus </div> </div>

Code Js

var tabs = document.querySelectorAll('.nav-tabs a') for (var i = 0; i < tabs.length; i++) { tabs[i].addEventListener('click', function (e) { var li = this.parentNode var div = this.parentNode.parentNode.parentNode if (li.classList.contains('active')) { return false; } div.querySelector('.nav-tabs .active').classList.remove('active') li.classList.add('active') div.querySelector('.tabs-content.active').classList.remove('active') div.querySelector(this.getAttribute('href')).classList.add('active') }) }

Code css

.tabs-content{ min-height: 200px; width: 700px; background-color: #fff; border: 1px solid #ddd; margin-left: 110px ; margin-right:auto; } .tabs-content { display: none; } .tabs-content.active {display: block !important;}

3 réponses

PhiSyX, il y a 9 ans

les IDs des tabs-content sont invalides.^^

FrenchGaming Team, il y a 9 ans

Comment sa ? Je ne comprend pas ce que tu veut me dire

PhiSyX, il y a 9 ans

<div class="tabs-content active" id="commande"> au lieux de <div class="tabs-content active" id="#commande"> sur toutes les div ayant tabs-content comme class.