Der beste Weg, um Twitter Bootstrap-Tabs persistent zu machen

Lesezeit: 6 Minuten

Benutzer-Avatar
DanS

Was ist der beste Weg, um diese Registerkarten dauerhaft zu machen?

http://twitter.github.com/bootstrap/javascript.html#tabs

Um etwas Kontext hinzuzufügen, ist dies für a Rubin auf Schienen Anwendung. Ich übergebe ein Array [tab1, tab2] meiner Ansicht nach beide Registerkarten rendern und das Bootstrap-Registerkarten-Plugin verwenden, um ihre Sichtbarkeit umzuschalten.

  • verwenden Sie eine serverseitige Sprache wie PHP?

    – DG3

    13. März 2012 um 14:27 Uhr

  • mit Rails und dem Twitter-Bootstrap-Rails-Gem

    – DanS

    13. März 2012 um 14:58 Uhr

  • können Sie nicht während der Seitenaktualisierung eine URL-Variable verwenden und sie mithilfe von Schienen zum Standard machen?

    – DG3

    13. März 2012 um 15:15 Uhr

Benutzer-Avatar
Sucrenoir

Dieser Code wählt abhängig vom #Hash den richtigen Tab aus und fügt den richtigen #Hash hinzu, wenn auf einen Tab geklickt wird. (dies verwendet jQuery)

Im CoffeeScript:

$(document).ready ->
    if location.hash != ''
         $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

Oder in JavaScript:

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

  • Vielen Dank für diese Antwort. Ich habe einige Änderungen daran vorgenommen, um zwei Probleme zu vermeiden: 1) Das Wechseln der Registerkarten wurde zum Navigationsverlauf hinzugefügt und 2) Die Bildlaufposition ging aufgrund der Fragmentnavigation bei der Rückwärtsnavigation verloren. gist.github.com/josheinstein/5586469

    – Josch

    15. Mai 2013 um 19:09 Uhr

  • Dies funktioniert nicht in Bootstrap 3. Verwenden shown.bs.tab Anstatt von shown für den Veranstaltungsnamen. Überprüfe hier

    – Zentralmaschine

    26. Oktober 2013 um 1:02 Uhr

  • großartige Antwort, aber wenn Sie vermeiden möchten, dass die Seite “springt”, wenn Sie anfangen, auf Ihre Registerkarten zu klicken, verwenden Sie diesen Code anstelle von “return”. $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { if(history.pushState) history.pushState(null, null, '#'+$(e.target).attr('href').substr(1)); else location.hash = '#'+$(e.target).attr('href').substr(1); });

    – d-Wade

    29. Januar 2014 um 21:35 Uhr


  • Ich habe die Bootstrap 3-Änderung vorgenommen, sie zu meiner Rails-App hinzugefügt und es hat funktioniert. Zwischen Rails, Gems und StackOverflow habe ich das Gefühl, kaum noch Code zu schreiben.

    – Ryan Bosinger

    8. April 2014 um 21:51 Uhr

Benutzer-Avatar
d-Wade

Ich wollte die beste Antwort hier verbessern …

Die Anerkennung geht an Sucrenoir, aber wenn Sie vermeiden möchten, beim Wechseln der Registerkarten auf die Seite zu springen, verwenden Sie diesen verbesserten Code:

$(document).ready(function() {

    // Show active tab on reload
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');

    // Remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
       } else {
            location.hash="#"+$(e.target).attr('href').substr(1);
       }
    });
});

  • Beste Antwort für Bootstrap 3

    – Ashselbst

    23. Dezember 2014 um 13:41 Uhr

  • Kopieren, einfügen und entspannen. Vielen Dank

    – Bojan Kogoj

    16. Dezember 2015 um 15:57 Uhr

  • Während die Antwort von @Sucrenoir gut ist und ich sie verwendet habe, um mein eigenes Problem zu lösen, ersetzt diese Antwort sie, weil die Seite auf Sucrenoirs Antwort irgendwie nicht aktualisiert wird # beim ersten Tabwechsel. Nur die erste. Aber dieser Code von @dootzky tut Aktualisieren Sie die Referenz beim ersten und jedem Klick auf die Registerkarte. Prost

    – Martin

    1. Februar 2016 um 22:08 Uhr

  • Ich erhalte eine Fehlermeldung TypeError: $(...).attr(...) is undefined für diese Zeile history.pushState(null, null, '#' + $(e.target).attr('href').substr(1));

    – Musakkhir Sayyed

    28. September 2016 um 13:05 Uhr


  • Wenn Sie durch Registerkarten navigieren und dann die Zurück-Taste des Browsers drücken, wird die zuvor ausgewählte Registerkarte nicht geladen.

    – Karns

    10. Juli 2020 um 19:38 Uhr

Benutzer-Avatar
HandTriX

Hier ist eine andere Möglichkeit, das Problem zu lösen.

Fügen Sie zuerst eine Zeile zum Klickereignis hinzu, um den Hash in der Adressleiste anzuzeigen:

$('#myTab').on('click', 'a', function (e) {
  e.preventDefault();

  // Add this line
  window.location.hash = $(this).attr('href');

  $(this).tab('show');
})

Stellen Sie dann sicher, dass der richtige Reiter aktiviert ist onload indem Sie diesen Teil zu Ihrem Document-Ready-Call hinzufügen.

if(window.location.hash){
   $('#myTab').find('a[href="'+window.location.hash+'"]').tab('show');
}

Alles zusammen kann man schreiben:

// Cache the ID
var navbox = $('#myTab');

// Activate tab on click
navbox.on('click', 'a', function (e) {
  var $this = $(this);

  // Prevent the ***default*** behavior
  e.preventDefault();

  // Set the hash to the address bar
  window.location.hash = $this.attr('href');

  // Activate the clicked tab
  $this.tab('show');
})

// If we have a hash in the address bar
if(window.location.hash){

  // Show right tab on load (read hash from address bar)
  navbox.find('a[href="'+window.location.hash+'"]').tab('show');
}

  • Gibt es eine Möglichkeit, dies mit den Zurück- und Vorwärts-Browser-Schaltflächen zu machen?

    – Jack Eccleshall

    3. September 2013 um 14:15 Uhr

  • Hast du es getestet? Es sollte den Verlauf basierend auf den geänderten Hashes in der URL ändern. developer.mozilla.org/en-US/docs/Web/Guide/DOM/…

    – HandTriX

    3. September 2013 um 15:03 Uhr


  • Ja … Das Skript ändert die für die ausgewählte Registerkarte relevante Browser-URL, ändert jedoch nicht die Registerkarte selbst. Es bleibt immer noch so, wie es eingeschaltet ist, wenn der Zurück-Pfeil des Browsers gedrückt wird.

    – Jack Eccleshall

    3. September 2013 um 16:03 Uhr

  • Ok man muss sich das anhören hashchangeVeranstaltung. Quick&Dirty: Demo | Code

    – HandTriX

    3. September 2013 um 16:24 Uhr


Benutzer-Avatar
Paul Berka

Ich wollte die besten zwei Antworten hier verbessern. 🙂

Dank geht an Sucrenoir und D-Wade.

Da die Verlaufs-API im Code verwendet wird, können Sie onchangehash (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange). Dieser Code fügt die Funktionalität der Zurück-Schaltfläche hinzu (https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate).

// Show active tab on reload
if (location.hash !== '')
    $('a[href="' + location.hash + '"]').tab('show');

// Remember the hash in the URL without jumping
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    if(history.pushState) {
        history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
    }
    else {
        location.hash="#"+$(e.target).attr('href').substr(1);
    }
});

// Remember to back button
window.onpopstate = function(e) {
    $('a[href="' + location.hash + '"]').tab('show');
};

Benutzer-Avatar
Awsom3D

Getestet für Bootstrap 4, minimalistischer (zweizeiliger) Code ohne History-Push, der auf jeder Seite mit Navigationsregisterkarten funktioniert.

<script type="text/javascript">
    $(document).ready(function(){

        // Store the currently selected tab in the hash value
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { location.replace($(e.target).attr("href")); });

        // Switch to the currently selected tab when loading the page
        $('.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
    });
</script>

  • Das funktioniert einfach! Ich habe es einfach kopiert und das war’s! (Bootstrap4)

    – lewis4u

    22. August 2019 um 12:59 Uhr


Benutzer-Avatar
Rory McCrossan

Sie können das URL-Fragment erhalten (das ist der Teil der URL nach #) beim Laden mit window.location.hashund legen Sie diese Registerkarte ausdrücklich als sichtbar fest:

if (window.location.hash) {
    $(window.location.hash).tab('show')
}

  • Das funktioniert einfach! Ich habe es einfach kopiert und das war’s! (Bootstrap4)

    – lewis4u

    22. August 2019 um 12:59 Uhr


Benutzer-Avatar
Gregor Houston

Eine weitere modifizierte Version, wenn Sie nicht möchten, dass Tab-Klicks zum Verlauf hinzugefügt werden, aber auch nicht möchten, dass die Seite auf und ab springt:

$(document).ready(function () {

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

  $("a[data-toggle="tab"]").on("shown.bs.tab", function (e) {
    var hash = $(e.target).attr("href");
    if (hash.substr(0,1) == "#") {
      var position = $(window).scrollTop();
      location.replace("#" + hash.substr(1));
      $(window).scrollTop(position);
    }
  });

});

1266830cookie-checkDer beste Weg, um Twitter Bootstrap-Tabs persistent zu machen

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

Privacy policy