18041 sujets

Questions générales et questions de débutants

[Résolu] Bootstrap | Affichage Panel avec Nav Tabs

Bonjour/Bonsoir

J'ai un problême d'affichage sur un panel avec nav tabs

Je peut pas vous donner mon compte car il est en vrac avec du test + affichage mais je suis parti sur le premier Panel de ce code : https://bootsnipp.com/snippets/featured/panels-with-nav-tabs

En gros, tout ce passe bien mais lorsque je recharge la page comme après avoir rempli par exemple un formulaire sur le second onglet, toutes le code Html / PhP se fait mais ça affiche forcément par défaut le premier onglet, ducoup j'aurai aimé avoir de l'aide sur comment laisser afficher le 2eme onglet quand par exemple je confirme ce fameux formulaire sur le 2eme onglet

Merci d'avance et désolé de mon incapacité à expliquer clairement Smiley decu
Bonsoir OnePunch,
je vais te décrire une façon de procéder en jQuery :

J'ai repiqué un exemple de Tabs sur W3C - Bootstrap Tabs and Pills et sur les tags "li" ajouté un id (="ongX") et une class "onglet" comme ci-dessous :


    <li id="ong1" class="onglet"><a data-toggle="pill" href="#home">Onglet 0</a></li>
    <li id="ong2" class="onglet"><a data-toggle="pill" href="#menu1">Onglet 1</a></li>
    <li id="ong3" class="onglet"><a data-toggle="pill" href="#menu2">Onglet 2</a></li>
    <li id="ong4" class="onglet"><a data-toggle="pill" href="#menu3">Onglet 3</a></li>


A fin du body il faut ajouter c'est quelques lignes de script :


<script>
    if (sessionStorage.ongletOuvert) {
        $("#"+sessionStorage.ongletOuvert).find("a").trigger("click");
    }
    $(".onglet").on("click", function() {
        sessionStorage.setItem("ongletOuvert",$(this).attr("id"));
    });
</script>


Le principe est simple : lorsque l'on "click" sur un tag 'li' avec la class "onglet", l'id de celui-ci est stocké dans sessionStorage (sur les vieux navigateurs on aurait utilisé un cookie) et lorsque la page est rechargée, si l'item sessionStorage.ongletOuvert est trouvé alors l'évènement "click" est déclenché sur l'ancre contenu dans le tag li dont on a mémorisé l'identifiant.

Bonne nuit,
GJboba
Meilleure solution
Et bien merci de la solution, ne connaissant que très peu et utilisant pas de Jquery je vais essayé ta solution et tenter de la comprendre
Sujet clos
Aller à