Last Updated: September 09, 2019
·
2.069K
· 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 ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside