Last Updated: September 09, 2019
·
1.864K
· mpatrick

Return to last active Tab on Twitter Bootstrap 3

Sup guys!

This little piece of javascript allow you to return to your last active Tab after you update your form.
It's really very simple, BUT HOW WE DIDN'T THINK THIS BEFORE? OMG!

Pure Javascript

$(document).ready(function() {
  var activeTab, lastTab;
  activeTab = $("[href=" + location.hash + "]");
  activeTab && activeTab.tab("show");
  $("a[data-toggle=\"pill\"]").on("shown.bs.tab", function(e) {
    return localStorage.setItem("lastTab", $(this).attr('href'));
  });
  lastTab = localStorage.getItem("lastTab");
  if (lastTab) {
    return $("a[href=\"" + lastTab + "\"]").click();
  }
});

And the version in Coffee...

$(document).ready ->
  activeTab = $("[href=" + location.hash + "]")
  activeTab and activeTab.tab("show")
  $("a[data-toggle=\"pill\"]").on "shown.bs.tab", (e) ->
    localStorage.setItem "lastTab", $(this).attr('href')
  lastTab = localStorage.getItem("lastTab")
  $("a[href=\"" + lastTab + "\"]").click() if lastTab

3 Responses
Add your response

Nice tip, thanks for sharing!

over 1 year ago ·

Great work, thanks!

over 1 year ago ·

great tip! keep up the good work!

over 1 year ago ·