Wie kann ich die ausgewählte Bootstrap-Registerkarte bei der Seitenaktualisierung beibehalten?

Lesezeit: 4 Minuten

Benutzer-Avatar
Code-Liebhaber

ich versuche zu Ausgewählte Registerkarte aktiv halten auf aktualisieren mit Bootstrap 3. Versucht und überprüft mit einigen Fragen, die hier bereits gestellt wurden, aber keine Arbeit für mich. Weiß nicht wo ich falsch liege. Hier ist mein 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');
}

  • Der Grund, warum es nicht funktioniert, ist, dass es die ausgewählte Registerkarte nicht speichert. Als ich es tat console.log("selectedTab::"+selectedTab);Ich habe : selectedTab::undefined . Die von Ihnen angewandte Logik ist also nicht korrekt

    – Der dunkle Ritter

    25. September 2013 um 8:14 Uhr

  • Können Sie mir bitte sagen, was ich tun soll?

    – Code-Liebhaber

    25. September 2013 um 8:20 Uhr

  • Ich denke das wird funktionieren: jsbin.com/UNuYoHE/2/edit . Wenn es mich wissen lässt, werde ich die Antwort in klarer Form posten. Vielleicht möchten Sie sich auch die div-Tab-Texte ansehen. Sie geben nicht die richtige Antwort, wenn Sie darauf klicken. Wenn Sie zB auf Tab4 klicken, erhalten Sie Tab1-Text.

    – Der dunkle Ritter

    25. September 2013 um 8:38 Uhr


  • Übrigens habe ich diese Antwort für die JS-Codierung verwendet: stackoverflow.com/questions/9529723/…

    – Der dunkle Ritter

    25. September 2013 um 8:41 Uhr

  • Danke, es funktioniert nicht und geht zurück zum ersten Tab. Ja, ich habe diese Antwort weitergeleitet … aber es hat nicht funktioniert … 🙁

    – Code-Liebhaber

    25. September 2013 um 8:50 Uhr

Benutzer-Avatar
koppor

Ich bevorzuge es, den ausgewählten Tab im Hashwert des Fensters zu speichern. Dies ermöglicht auch das Versenden von Links an Kollegen, die dann „die gleiche“ Seite sehen. Der Trick besteht darin, den Hash des Speicherorts zu ändern, wenn ein anderer Tab ausgewählt wird. Wenn Sie in Ihrer Seite bereits # verwenden, muss eventuell das Hashtag gesplittet werden. In meiner App verwende ich “:” als Trennzeichen für Hashwerte.

<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, muss nach obigem in a eingebettet werden <script>...</script> Teil.

$('#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="'%20+%20hash%20+%20'"]').tab('show');

  • Im Skriptabschnitt sollten Sie am Ende von ein Semikolon hinzufügen e.preventDefault(); und $(this).tab('show');

    – Sean Adams-Hiett

    29. Januar 2014 um 0:28 Uhr

  • Leider springt der Browser beim Anklicken zum Tab-Inhalt. Dies ist das Standardverhalten, wenn Sie den Wert window.location.hash festlegen. Eine Alternative könnte die Verwendung von push.state sein, aber Sie benötigen ein Polyfill für IE<=9. Weitere Informationen und andere alternative Lösungen finden Sie unter stackoverflow.com/questions/3870057/…

    – Philipp Michael

    7. Juli 2015 um 8:21 Uhr


  • Gibt es eine Möglichkeit, das “gefälschte Scrollen” zu der betreffenden ID zu verhindern, wenn wir auf das Element klicken?

    – Patrice Poliquin

    12. Dezember 2016 um 19:59 Uhr

  • Das Blättern erfolgt aufgrund der den Registerkarten zugewiesenen ID. Wenn Sie semantische IDs verwenden und den Hash entstellen (dh Präfix/Suffix hinzufügen), wird er nicht als gültige ID erkannt und es findet kein Scrollen statt. Werde die Antwort damit erweitern.

    – Alex Mazzariol

    13. Juli 2017 um 13:33 Uhr

  • @koppor es funktioniert, aber wenn ich direkt auf die andere gespeicherte Registerkarte (über den Link) springe, wird die Startseite oder die erste Registerkarte schnell etwa 1 Sekunde lang angezeigt, bevor sie zur Registerkarte im Link springt. Irgendeine Idee, um zu verhindern, dass die erste angezeigt wird Tab, da es nicht benötigt wird?

    – mein Junge

    12. März 2019 um 6:19 Uhr

Benutzer-Avatar
Xavi Martinez

Das ist das Beste, was ich ausprobiert habe:

$(document).ready(function() {
    if (location.hash) {
        $("a[href=""https://stackoverflow.com/questions/18999501/+ 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");
});

  • Es wird aktualisiert, wenn ich auf ein Auswahlfeld oder Textfeld geklickt habe

    – Rei-Tee

    29. September 2015 um 7:40 Uhr

  • Ich denke, den Selektor zu ändern "a[data-toggle=tab]" wäre besser. Die Art und Weise, wie der Selektor jetzt geschrieben ist, ändert auch die Browser-URL, wenn auf einen Link geklickt wird, um beispielsweise ein Modal zu öffnen.

    – Leifdenby

    25. Oktober 2015 um 21:53 Uhr


  • Schöne Lösung, aber die Seite flackert beim Tab-Wechsel, was ich nicht brauche. Tabs sind mit AJAX gefüllt, vielleicht könnte das ein Problem sein?

    – Jeesus

    2. Dezember 2015 um 7:51 Uhr

  • Möglicherweise möchten Sie dem Selektor eine Zeichenfolgenklammer hinzufügen, z. B. ‘a[href=”‘%20+%20location.hash%20+%20′”]’ . Über einen Syntaxfehler gestolpert.

    – asdacap

    2. Februar 2016 um 10:16 Uhr

  • Die Verwendung dieses As-is steht im Konflikt mit Bootstrap-Dropdowns (die data-toggle="dropdown" und die ich in einem Fall zufällig auf derselben Seite mit Registerkarten habe. Wie jemand hier vorgeschlagen hat, nur ersetzen $(document.body).on("click", "a[data-toggle]", function(event) { mit $(document.body).on("click", "a[data-toggle='tab']", function(event) { hat es mir angetan.

    – Jivemann

    12. Juni 2018 um 5:58 Uhr


Eine Mischung aus anderen Antworten:

  • Kein Sprung auf Klick
  • Speichern Sie den Hash vor Ort
  • Auf localStorage speichern (z. B. zum Absenden des Formulars)
  • Einfach kopieren&einfügen 😉

    if (location.hash) {
      $('a[href=\'"https://stackoverflow.com/questions/18999501/+ location.hash +"\']').tab('show');
    }
    var activeTab = localStorage.getItem('activeTab');
    if (activeTab) {
      $('a[href="'%20+%20activeTab%20+%20'"]').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');
    });
    

  • Beste Lösung, die ich von vielen verschiedenen ausprobiert habe. Das Springen zum Tab-Inhalt war nervig

    – Kentor

    14. Juni 2017 um 19:36 Uhr


  • Der Inhaltssprung ist mit dieser Antwort immer noch da

    – Shahbaz A.

    31. August 2017 um 7:50 Uhr

  • Es wurde eine Einschränkung dazu gefunden – die im lokalen Speicher gespeicherte Registerkarte überschreibt eine im Standort-Hash, was es schwierig macht, Links zu folgen, wenn die Seite bereits besucht wurde. Ich habe so aktualisiert: var activeTab = localStorage.getItem('activeTab'); if (location.hash) { $('a[href=\''%20+%20location.hash%20+%20'\']').tab('show'); } else if (activeTab) { $('a[href="'%20+%20activeTab%20+%20'"]').tab('show'); }

    – Gary Stanton

    15. September 2017 um 11:46 Uhr


  • Ich frage mich, warum das bei mir nicht funktioniert. Soll ich etwas in diesem Code ersetzen und nicht einfach kopieren und einfügen? 🙂

    – mein Junge

    12. März 2019 um 6:54 Uhr

  • Damit dies funktioniert, müssen Sie dieses Skript entweder NACH Ihren Tabulatoren einfügen ODER die erste Klausel (zwei ifs + var dec) einschließen $(document).ready(function() { weil Ihre Registerkarten noch nicht existieren und versucht wird, die aktive Registerkarte zuzuschlagen, bevor sie geladen werden

    – Jonathan

    23. Mai 2019 um 22:54 Uhr


Xavis Code funktionierte fast vollständig. Aber als ich zu einer anderen Seite navigierte, ein Formular abschickte und dann auf die Seite mit meinen Registerkarten umgeleitet wurde, wurde die gespeicherte Registerkarte überhaupt nicht geladen.

localStorage zur Rettung (leicht geänderter Code von Nguyen):

$('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="'%20+%20selectedTab%20+%20'"]').tab('show');
}

Benutzer-Avatar
Ajith R. Nair

Dieser verwendet HTML5 localStorage aktive Registerkarte zu speichern

$('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="'%20+%20activeTab%20+%20'"]').tab('show');
}

Referenz: 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

  • Das ist nett, aber ein Nachteil ist, dass Sie keine Links mit aktivem Tab teilen können

    – lfender6445

    13. April 2016 um 18:30 Uhr

  • Das ist nett, der Vorteil ist, dass es kein Problem einführt, bei dem “window.location.hash” einen Hash-Wert zum HTTP-Anforderungsparameter in der URL hinzufügt, was zu Kollisionen und fehlerhaften Parametern führt, die von anderen HTTP-Anforderungen wie Paginierung usw. gelesen werden.

    – Mist

    27. April 2016 um 22:01 Uhr

Nun, das ist bereits 2018, aber ich denke, es ist besser spät als nie (wie ein Titel in einer Fernsehsendung), lol. Hier unten ist der jQuery-Code, den ich während meiner Diplomarbeit erstellt habe.

<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="'%20+%20activeTab%20+%20'"]').tab('show');
    }
});
</script>

und hier ist der Code für Bootstrap-Tabs:

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

Dont forget to call the bootstrap and other fundamental things 

Hier sind Schnellcodes für Sie:

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

Kommen wir nun zur Erklärung:

Der jQuery-Code im obigen Beispiel ruft einfach den href-Attributwert des Elements ab, wenn ein neuer Tab mithilfe der jQuery-Methode .attr() angezeigt wurde, und speichert ihn lokal im Browser des Benutzers über das HTML5-Objekt localStorage. Später, wenn der Benutzer die Seite aktualisiert, ruft er diese Daten ab und aktiviert die zugehörige Registerkarte über die Methode .tab(‘show’).

Suchen Sie nach einigen Beispielen? hier ist einer für euch..
https://jsfiddle.net/Wineson123/brseaabdr/

Ich wünschte, meine Antwort könnte euch allen helfen. Cheerio! 🙂

  • Das ist nett, aber ein Nachteil ist, dass Sie keine Links mit aktivem Tab teilen können

    – lfender6445

    13. April 2016 um 18:30 Uhr

  • Das ist nett, der Vorteil ist, dass es kein Problem einführt, bei dem “window.location.hash” einen Hash-Wert zum HTTP-Anforderungsparameter in der URL hinzufügt, was zu Kollisionen und fehlerhaften Parametern führt, die von anderen HTTP-Anforderungen wie Paginierung usw. gelesen werden.

    – Mist

    27. April 2016 um 22:01 Uhr

Basierend auf den Antworten von Xavi Martínez und koppor habe ich eine Lösung gefunden, die den URL-Hash oder localStorage verwendet, je nach Verfügbarkeit des letzteren:

function rememberTabSelection(tabPaneSelector, useHash) {
    var key = 'selectedTabFor' + tabPaneSelector;
    if(get(key)) 
        $(tabPaneSelector).find('a[href="https://stackoverflow.com/questions/18999501/+%20get(key)%20+"]').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);
    }
}

Verwendungszweck:

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

Es hält nicht mit der Zurück-Taste Schritt, wie es bei der Lösung von Xavi Martínez der Fall ist.

1018550cookie-checkWie kann ich die ausgewählte Bootstrap-Registerkarte bei der Seitenaktualisierung beibehalten?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy