Mon JavaScript ne fonctionne pas..

Silvin Strano
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

SLK
Réponse acceptée

Salut,

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

Silvin Strano
Auteur

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
Auteur

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>
Silvin Strano
Auteur

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
Auteur

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