[BootStrap] Rendre un onglet actif via javascript

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
alf78fr
Messages : 11
Enregistré le : 23 avr. 2019, 10:40

[BootStrap] Rendre un onglet actif via javascript

Message par alf78fr » 28 déc. 2019, 18:54

bonjour à toutes et tous

Dans une page internet j'ai mis des onglets (Tab) via bootstrap avec 4 onglets suyite à un rafraîchissement de la page je voudrais que le 4éme onglet soit actif

Code : Tout sélectionner

<ul class="nav nav-pills" id="myPill" role="tablist">
    <li class="nav-item active">
        <a class="nav-link active" id="tab-description" data-toggle="tab"
href="#content-description"
role="tab" aria-controls="content-description" aria-selected="true">
Description
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="tab-informations" data-toggle="tab"
href="#content-informations"
role="tab" aria-controls="content-informations" aria-selected="false">
Informations
        </a>
    </li>
 
    <li class="nav-item">
        <a class="nav-link" id="tab-fiche" data-toggle="tab"
href="#content-fiche"
role="tab" aria-controls="content-fiche" aria-selected="false">
Variables
        </a>
    </li>
 
<li class="nav-item">
<a class="nav-link" id="tab-photos" data-toggle="tab"         <!-- cet onglet doit être actif -->
href="#content-photos"
role="tab" aria-controls="content-photos" aria-selected="false">
Photos
        </a>
    </li>
</ul>

voici mon code javascript qui ne fonctionne pas:

Code : Tout sélectionner

document.getElementById("content-description").classList.replace("tab-pane fade show active","tab-pane fade");
document.getElementById("content-description").setAttribute('aria-selected', 'false');
document.getElementById("content-photos").classList.toggle("tab-pane fade","tab-pane fade show active");
document.getElementById("content-photos").setAttribute('aria-selected','true');
Merci d'avance

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: [BootStrap] Rendre un onglet actif via javascript

Message par webmaster » 29 déc. 2019, 10:54

Bonjour

Le message d'erreur est
"Uncaught TypeError: Cannot read property 'classList' of null"

Cela me semble logique, il n'y a aucun élément avec id = "content-description" ou "content-photos"
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre