Bootstrap 3: conserver l'onglet sélectionné lors de l'actualisation de la page


120

J'essaie de garder l'onglet sélectionné actif lors de l'actualisation avec Bootstrap 3 . Essayé et vérifié avec une question déjà posée ici, mais aucun travail pour moi. Je ne sais pas où je me trompe. Voici mon code

HTML

<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
    <li><a href="#career-path" data-toggle="tab">Career Path</a></li>
    <li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->

<div class="tab-content">
    <div class="tab-pane active" id="personal-info">
        tab data here...
    </div>

    <div class="tab-pane" id="Employment-info">
        tab data here...
    </div>

    <div class="tab-pane" id="career-path">
        tab data here...
    </div>

    <div class="tab-pane" id="warnings">
        tab data here...
    </div>
</div>

Javascript :

// tab
$('#rowTab a:first').tab('show');

//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('selectedTab', $(e.target).attr('id'));
});

//go to the latest tab, if it exists:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
  $('#'+selectedTab).tab('show');
}

La raison pour laquelle cela ne fonctionne pas est que, il ne stocke pas l'onglet sélectionné. Quand je l'ai fait console.log("selectedTab::"+selectedTab);, je suis arrivé: selectedTab::undefined. Donc la logique que vous avez appliquée n'est pas correcte
The Dark Knight

Alors, pouvez-vous s'il vous plaît me guider quoi faire?
Code Lover

J'essaye de le réparer. Si je le fais, je publierai la réponse ici pour vous
The Dark Knight

J'apprécie cela .. merci de votre aide ..
Code Lover

Je pense que cela fonctionnera: jsbin.com/UNuYoHE/2/edit . Si cela me fait savoir, je publierai la réponse de manière claire. Vous pouvez également consulter les textes des onglets div. ils ne donnent pas la bonne réponse lorsque vous cliquez dessus. Par exemple, si vous cliquez sur tab4, vous obtenez du texte tab1.
The Dark Knight

Réponses:


187

Je préfère stocker l'onglet sélectionné dans la valeur de hachage de la fenêtre. Cela permet également d'envoyer des liens à des collègues, qui voient alors «la même» page. L'astuce consiste à changer le hachage de l'emplacement lorsqu'un autre onglet est sélectionné. Si vous utilisez déjà # dans votre page, la balise de hachage doit peut-être être divisée. Dans mon application, j'utilise ":" comme séparateur de valeur de hachage.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">home</div>
  <div class="tab-pane" id="profile">profile</div>
  <div class="tab-pane" id="messages">messages</div>
  <div class="tab-pane" id="settings">settings</div>
</div>

JavaScript, doit être intégré après ce qui précède dans une <script>...</script>partie.

$('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
  window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

Dans la section script, vous devez ajouter un point-virgule à la fin de e.preventDefault();et$(this).tab('show');
Sean Adams-Hiett

12
Malheureusement, le navigateur passe au contenu de l'onglet lorsque vous cliquez dessus. Il s'agit du comportement par défaut lorsque vous définissez la valeur window.location.hash. Une alternative peut être d'utiliser push.state mais vous avez besoin d'un polyfill pour IE <= 9. Pour plus d'informations et d'autres solutions alternatives, consultez stackoverflow.com/questions/3870057/…
Philipp Michael

3
Existe-t-il un moyen d'empêcher le "faux défilement" de l'ID en question lorsque nous cliquons sur l'élément?
Patrice Poliquin

1
Le défilement est dû à l'identifiant attribué aux pages à onglets. Si vous utilisez des identifiants sémantiques et modifiez le hachage (c'est-à-dire ajoutez un préfixe / suffixe), il ne sera pas reconnu comme un identifiant valide et aucun défilement ne se produira. Élargira la réponse avec cela.
Alex Mazzariol

1
@koppor cela fonctionne mais quand je saute directement sur l'autre onglet enregistré (via un lien), il affiche rapidement l'onglet d'accueil ou le premier onglet environ 1 seconde avant de passer à l'onglet dans le lien .. Toute idée pour l'empêcher d'afficher le premier onglet car il n'est pas nécessaire?
mboy

135

C'est le meilleur que j'ai essayé:

$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle='tab']", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
});

20
Celui-ci fonctionne mieux que la solution acceptée (Par mieux je veux dire: le copier-coller fonctionne: D)
Cyril Duchon-Doris

3
meilleur copier-coller de tous les temps: P
Ghostff

1
Je pense que changer le sélecteur "a[data-toggle=tab]"serait mieux. La façon dont le sélecteur est maintenant écrit change également l'URL du navigateur lorsque vous cliquez sur un lien pour ouvrir par exemple un modal.
leifdenpar

5
Vous voudrez peut-être ajouter un crochet de chaîne sur le sélecteur, comme 'a [href = "' + location.hash + '"]'. Je suis tombé sur une erreur de syntaxe.
asdacap le

1
L'utilisation de ceci tel quel est en conflit avec les listes déroulantes Bootstrap (qui utilisent data-toggle="dropdown"et que j'ai sur la même page avec des onglets dans un cas. Comme quelqu'un l'a suggéré ici, le simple remplacement $(document.body).on("click", "a[data-toggle]", function(event) {par a $(document.body).on("click", "a[data-toggle='tab']", function(event) {fait l'affaire pour moi.
Jiveman

44

Un mélange entre les autres réponses:

  • Pas de saut au clic
  • Enregistrer sur le hachage de l'emplacement
  • Économisez sur localStorage (par exemple: pour soumettre un formulaire)
  • Copiez et collez simplement;)

    if (location.hash) {
      $('a[href=\'' + location.hash + '\']').tab('show');
    }
    var activeTab = localStorage.getItem('activeTab');
    if (activeTab) {
      $('a[href="' + activeTab + '"]').tab('show');
    }
    
    $('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
      e.preventDefault()
      var tab_name = this.getAttribute('href')
      if (history.pushState) {
        history.pushState(null, null, tab_name)
      }
      else {
        location.hash = tab_name
      }
      localStorage.setItem('activeTab', tab_name)
    
      $(this).tab('show');
      return false;
    });
    $(window).on('popstate', function () {
      var anchor = location.hash ||
        $('a[data-toggle=\'tab\']').first().attr('href');
      $('a[href=\'' + anchor + '\']').tab('show');
    });

1
Dommage que j'ai d'abord essayé les autres solutions - celle-ci fonctionne le mieux!
tdc

2
La meilleure solution que j'ai essayée de beaucoup de différents. Le passage au contenu de l'onglet était ennuyeux
kentor

4
Le saut de contenu est toujours là avec cette réponse
shazyriver

2
Excellente solution: copier, coller, aller déjeuner. Agréable.
Gary Stanton le

1
La meilleure solution jamais
chance

19

Le code de Xavi fonctionnait presque entièrement. Mais lors de la navigation vers une autre page, soumettre un formulaire, puis être redirigé vers la page avec mes onglets ne chargeait pas du tout l'onglet enregistré.

localStorage à la rescousse (code de Nguyen légèrement modifié):

$('a[data-toggle="tab"]').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href");
    localStorage.setItem('selectedTab', id)
});

var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab != null) {
    $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
}

2
C'est de l'or! Cela fonctionne même avec des modaux! Très bonne réponse.
Lech Osiński

2
Ce code est fantastique et fonctionne très bien si vous voulez que l'onglet reste sélectionné même si l'utilisateur quitte le site (met fin à la session) et y revient plus tard. Pour que la sélection ne persiste que pendant la session en cours et revenir à l'onglet par défaut lors de la session suivante, remplacez les deux instances de "localStorage" par "sessionStorage".
Gary Ray

Solution courte, douce, copier / coller qui fonctionne très bien avec Bootstrap 4.
Support CFP

Wow formidable solution!
Jilani A

1
[data-toggle="pill"]pour les pilules
mxmissile

12

Celui-ci utilise HTML5 localStoragepour stocker l'onglet actif

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
   $('#navtab-container a[href="' + activeTab + '"]').tab('show');
}

réf: http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php https://www.w3schools.com/bootstrap /bootstrap_ref_js_tab.asp


c'est bien, mais un inconvénient est que vous ne pourrez pas partager des liens avec l'onglet actif
lfender6445

c'est bien, l'avantage est qu'il n'introduit pas de problème où "window.location.hash" ajoute une valeur de hachage au paramètre de requête http dans l'url provoquant une collision et un mauvais paramètre lu par d'autres requêtes http telles que la pagination, etc.
Dung

4

En me basant sur les réponses fournies par Xavi Martínez et koppor, j'ai trouvé une solution qui utilise le hachage d'url ou localStorage en fonction de la disponibilité de ce dernier:

function rememberTabSelection(tabPaneSelector, useHash) {
    var key = 'selectedTabFor' + tabPaneSelector;
    if(get(key)) 
        $(tabPaneSelector).find('a[href=' + get(key) + ']').tab('show');

    $(tabPaneSelector).on("click", 'a[data-toggle]', function(event) {
        set(key, this.getAttribute('href'));
    }); 

    function get(key) {
        return useHash ? location.hash: localStorage.getItem(key);
    }

    function set(key, value){
        if(useHash)
            location.hash = value;
        else
            localStorage.setItem(key, value);
    }
}

Usage:

$(document).ready(function () {
    rememberTabSelection('#rowTab', !localStorage);
    // Do Work...
});

Il ne suit pas le bouton de retour comme c'est le cas pour la solution de Xavi Martínez .


4

Mon code, ça marche pour moi, j'utilise localStorageHTML5

$('#tabHistory  a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});
$("ul.nav-tabs#tabHistory > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href");
  localStorage.setItem('selectedTab', id)
});
var selectedTab = localStorage.getItem('selectedTab');
$('#tabHistory a[href="' + selectedTab + '"]').tab('show');

4

J'ai essayé et il fonctionne: (S'il vous plaît remplacer ce avec la pilule ou un onglet que vous utilisez)

    jQuery(document).ready(function() {
        jQuery('a[data-toggle="pill"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', jQuery(e.target).attr('href'));
        });

        // Here, save the index to which the tab corresponds. You can see it 
        // in the chrome dev tool.
        var activeTab = localStorage.getItem('activeTab');

        // In the console you will be shown the tab where you made the last 
        // click and the save to "activeTab". I leave the console for you to 
        // see. And when you refresh the browser, the last one where you 
        // clicked will be active.
        console.log(activeTab);

        if (activeTab) {
           jQuery('a[href="' + activeTab + '"]').tab('show');
        }
    });

J'espère que cela aiderait quelqu'un.

Voici le résultat: https://jsfiddle.net/neilbannet/ego1ncr5/5/


4

Eh bien, c'est déjà en 2018 mais je pense qu'il vaut mieux tard que jamais (comme un titre dans une émission télévisée), lol. Voici le code jQuery que j'ai créé lors de ma thèse.

<script type="text/javascript">
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.affectedDiv.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
});
</script>

et voici le code pour les onglets bootstrap:

<div class="affectedDiv">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
        <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
        <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <h3>Section A</h3>
            <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>Section B</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <h3>Section C</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
    </div>
</div>


N'oubliez pas d'appeler le bootstrap et d'autres choses fondamentales 

voici des codes rapides pour vous:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


Passons maintenant à l'explication:

Le code jQuery de l'exemple ci-dessus obtient simplement la valeur de l'attribut href de l'élément lorsqu'un nouvel onglet a été affiché à l'aide de la méthode jQuery .attr () et l'enregistre localement dans le navigateur de l'utilisateur via l'objet HTML5 localStorage. Plus tard, lorsque l'utilisateur actualise la page, il récupère ces données et active l'onglet associé via la méthode .tab ('show').

Vous recherchez des exemples? en voici un pour vous les gars .. https://jsfiddle.net/Wineson123/brseabdr/

Je souhaite que ma réponse puisse vous aider tous .. Cheerio! :)


2

Comme je ne peux pas encore commenter, j'ai copié la réponse ci-dessus, cela m'a vraiment aidé. Mais je l'ai changé pour qu'il fonctionne avec des cookies au lieu de #id donc je voulais partager les modifications. Cela permet de stocker l'onglet actif plus longtemps qu'une seule actualisation (par exemple, une redirection multiple) ou lorsque l'id est déjà utilisé et que vous ne voulez pas implémenter la méthode de fractionnement de koppors.

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane" id="profile">profile</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>

<script>
$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    $.cookie('activeTab', id);
});

    // on load of the page: switch to the currently selected tab
    var hash = $.cookie('activeTab');
    if (hash != null) {
        $('#myTab a[href="#' + hash + '"]').tab('show');
    }
</script>

Merci pour la mise à jour. En réalité, je cherchais une telle résolution, mais au moment où je le voulais, je n'ai obtenu que la réponse @koppor comme fonctionnant. En fait, c'est l'un des meilleurs moyens d'utiliser la fonction de retour. Merci pour la mise à jour
Code Lover

2

J'ai essayé le code proposé par Xavi Martínez . Cela a fonctionné mais pas pour IE7. Le problème est que les onglets ne font référence à aucun contenu pertinent.
Donc, je préfère ce code pour résoudre ce problème.

function pageLoad() {
  $(document).ready(function() {

    var tabCookieName = "ui-tabs-1"; //cookie name
    var location = $.cookie(tabCookieName); //take tab's href

    if (location) {
      $('#Tabs a[href="' + location + '"]').tab('show'); //activate tab
    }

    $('#Tabs a').click(function(e) {
      e.preventDefault()
      $(this).tab('show')
    })

    //when content is alredy shown - event activate 
    $('#Tabs a').on('shown.bs.tab', function(e) {
      location = e.target.hash; // take current href
      $.cookie(tabCookieName, location, {
        path: '/'
      }); //write href in cookie
    })
  });
};

c'est bien, mais un inconvénient est que vous ne pourrez pas partager des liens avec l'onglet actif
lfender6445

1

Merci d'avoir partagé.

En lisant toutes les solutions. J'ai proposé une solution qui utilise le hachage d'url ou localStorage en fonction de la disponibilité de ce dernier avec le code ci-dessous:

$(function(){
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    })

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});

1

Pour Bootstrap v4.3.1. Essayez ci-dessous:

$(document).ready(function() {
    var pathname = window.location.pathname; //get the path of current page
    $('.navbar-nav > li > a[href="'+pathname+'"]').parent().addClass('active');
})

0

En utilisant html5, j'ai concocté celui-ci:

Quelque part sur la page:

<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>

Le viewbag doit juste contenir l'identifiant de la page / de l'élément, par exemple: "testing"

J'ai créé un site.js et ajouté le script sur la page:

/// <reference path="../jquery-2.1.0.js" />
$(document).ready(
  function() {
    var setactive = $("#heading").data("activetab");
    var a = $('#' + setactive).addClass("active");
  }
)

Maintenant, tout ce que vous avez à faire est d'ajouter vos identifiants à votre barre de navigation. Par exemple.:

<ul class="nav navbar-nav">
  <li **id="testing" **>
    @Html.ActionLink("Lalala", "MyAction", "MyController")
  </li>
</ul>

Tous saluent l'attribut data :)


0

En plus de la réponse de Xavi Martínez en évitant le saut au clic

Éviter le saut

$(document).ready(function(){

    // show active tab

    if(location.hash) {

        $('a[href=' + location.hash + ']').tab('show');
    }

    // set hash on click without jumb

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// set hash on popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    $('a[href=' + anchor + ']').tab('show');
});

Onglets imbriqués

implémentation avec le caractère "_" comme séparateur

$(document).ready(function(){

    // show active tab

    if(location.hash) {

        var tabs = location.hash.substring(1).split('_');

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });         

        $('a[href=' + location.hash + ']').tab('show');
    }

    // set hash on click without jumb

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        var tabs = location.hash.substring(1).split('_');

        //console.log(tabs);

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// set hash on popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    var tabs = anchor.substring(1).split('_');

    $.each(tabs,function(n){

        $('a[href=#' + tabs[n] + ']').tab('show');
    });

    $('a[href=' + anchor + ']').tab('show');
});

0

Nous avons utilisé le déclencheur jquery pour charger un script d'appuyer sur le bouton pour nous

$ (". nom_classe"). trigger ('clic');


0

Malheur, il y a tellement de façons de faire ça. Je suis venu avec ceci, court et simple. J'espère que cela aidera les autres.

  var url = document.location.toString();
  if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
  } 

  $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    if(e.target.hash == "#activity"){
      $('.nano').nanoScroller();
    }
  })

0

Il existe une solution après avoir rechargé la page et conservé l'onglet attendu comme sélectionné.

Supposons qu'après l'enregistrement des données, l'URL redirigée soit: my_url # tab_2

Maintenant, grâce au script suivant, votre onglet attendu restera sélectionné.

$(document).ready(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        $('.nav-tabs a').removeClass('active');
    }
});

La classe active est automatiquement assignée dans la balise d'ancrage, c'est pourquoi elle est supprimée par $ ('. Nav-tabs a'). RemoveClass ('active'); ce script.
Hasib Kamal
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.