Mon JavaScript ne fonctionne pas..

Par Silvin Strano, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Je suis encore débutant et je fais le tuto "TP - Systèmes d'onglets"
J'écris le même code que notre amis Grafikart mais quand je recharge la page, rien ne fonctionne de ce que j'ai écris.
En recherchant sur Internet j'ai vue qu'il fallait activer JS dans notre navigateur (Chrome pour ma pars) il était bien activer, j'ai même
installer Mozilla pour voir si cela été différent ou non mais rien ne change. Je sais vraiment plus quoi faire pour que mon JS fonctionne..
Merci de votre aide les amis !!

5 réponses

Silvin Strano, il y a 9 ans

La console me dit : Uncaught SyntaxError: Unexpected token false tabs.js:9
Mon code :

var tabs = document.querySelectorAll(' .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')){ retunr false } // ON RETIRE la class active de l'onglet actif div.querySelector('.tabs .active').classList.remove('active') // J'ajoute la class active à l'onglet actuel li.classList.add('active') // ON retire la class active sur le contenu actif div.querySelector('.tab-content.active').classList.remove('active') // J'ajoute la class active sur le contenu correspondant à mon clic div.querySelector(this.getAttribute('href')).classList.add('active') }) }
Silvin Strano, il y a 9 ans

Le code de index.html :

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tabs.css"> </head> <body> <div> <ul class="tabs"> <li class="active"><a href="#home">Accueil</a></li> <li><a href="#mentions">Mentions</a></li> <li><a href="#about">A propos</a></li> </ul> <div class="tabs-content"> <div class="tab-content active" id="home">Eosque incitans sunt audaces nefariis baiolorum ideo ad usque audaces quae urbis nefariis expediendum incitans.</div> <div class="tab-content" id="mentions">incitans sunt audaces nefariis baiolorum ideo ad usque audaces quae urbis nefariis expediendum incitans.</div> <div class="tab-content" id="about">sunt audaces nefariis baiolorum ideo ad usque audaces quae urbis nefariis expediendum incitans.</div> </div> </div> <script src="tabs.js"></script> </body> </html>
SLK, il y a 9 ans

Salut,

la ligne 9, c'est pas le "retunr" ?

Silvin Strano, il y a 9 ans

Je suis vraiment un idiot.. J'ai refait le code de fond en comble et voilà que juste une faute de frappe aussi débile gâche le code.. c'est ironique quand même ^^
Merci beaucoup ! ça fonctionne désormais !!

Silvin Strano, il y a 9 ans

Oui ça pique les yeux à la fin xD
Merci encore ;)