it-swarm.com.de

Bester Weg, um Twitter-Bootstrap-Tabs dauerhaft zu machen

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 eine Rails-Anwendung. Ich übergebe ein Array [tab1, tab2] an meine Ansicht, rendere beide Registerkarten und verwende das Bootstrap-Tab-Plugin, um ihre Sichtbarkeit umzuschalten.

43
DanS

Dieser Code wählt die rechte Registerkarte in Abhängigkeit von #hash aus und fügt die rechte #hash hinzu, wenn auf eine Registerkarte geklickt wird. (dies verwendet Jquery)

In Kaffeescript:

$(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 JS:

$(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);
    });
});
82
Sucrenoir

Ich wollte die beste Antwort hier verbessern ..

Die Gutschrift geht an Sucrenoir. Wenn Sie jedoch beim Wechseln der Registerkarten nicht auf die Seite springen möchten, 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);
       }
    });
});
35
d-wade

Hier ist ein anderer Weg, um das Problem zu lösen.

Fügen Sie zunächst eine Zeile zum click-Ereignis 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');
})

Vergewissern Sie sich dann, dass die rechte Registerkarte onload aktiviert ist, indem Sie diesen Teil Ihrem Aufruf für das Dokument bereit hinzufügen.

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

Alle zusammen können Sie 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');
}
14
HaNdTriX

Ich wollte die besten zwei Antworten hier verbessern .. :)

Kredit geht an Sucrenoir und d-wade.

Da in code die History-API verwendet wird, können Sie onchangehash nicht verwenden ( 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');
};
6
Pavel Berka

Eine weitere modifizierte Version, wenn Sie nicht möchten, dass Tabulatoren zum Verlauf hinzugefügt werden, die Seite aber nicht auf und ab springen soll:

$(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);
    }
  });

});
1
Greg Houston

Führen Sie nach dem Laden von DOM den folgenden Code aus:

$('a[data-toggle=tab]').on('click', function () {
    history.pushState(null, null, $(this).attr('href'));
});


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

Dies führt jedoch zu einer schlechten Benutzeroberfläche, da die derzeit aktive Registerkarte zuerst angezeigt wird und dann zu einer Registerkarte von location.hash gewechselt wird

1
Artur Beljajev

Sie können das URL-Fragment (das ist der Teil der URL nach #) beim Laden mit window.location.hash abrufen und diese Registerkarte speziell als sichtbar festlegen:

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

Getestet für Bootstrap 4, minimalistischer Code (2 Zeilen) ohne Verlauf, der auf jeder Seite mit Nav-Registerkarten 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>
0
Awsom3D