Bootstrap tabs with hashchange support

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <!--<link rel="icon" href="../../favicon.ico">-->

    <title>Bootstrap tabs with hashchange support</title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">

<div class="page-header">
  <h2>
    Bootstrap tabs demo
    <small>by <a href="https://stackoverflow.com/users/9217760/sally-cj">Sally</a></small>
  </h2>
</div>

<div class="alert alert-info">
  <p>
    <strong>Note:</strong>
    The markup/<code>HTML</code> was copied from <a href="https://getbootstrap.com/docs/3.3/javascript/#tabs">this page</a>, and this template was based on <a href="https://getbootstrap.com/docs/3.3/examples/starter-template/">the Starter Template for Bootstrap 3</a>.
  </p>
</div>

<p>
  Click on the <a href="#profile">Profile link</a> and press the <kbd>Back</kbd> button on your keyboard. And/or modify the URL <i>hash</i> &mdash; i.e. add <code>#profile</code> to the URL address in the browser's address box/bar &mdash; and see if the <code>onhashchange</code> callback works properly. Then try with the other links (e.g. <a href="#settings">Settings</a>) and/or hashes (e.g. <code>#settings</code>).
</p>

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home"><p>Content for the Home tab.</p></div>
    <div role="tabpanel" class="tab-pane" id="profile"><p>Content for the Profile tab.</p></div>
    <div role="tabpanel" class="tab-pane" id="messages"><p>Content for the Messages tab.</p></div>
    <div role="tabpanel" class="tab-pane" id="settings"><p>Content for the Settings tab.</p></div>
  </div>

</div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <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>

    <script>
// Forked from https://codepen.io/rnr/pen/dMNZmx/
$(function(){
  var defaultTab = '#home';

  function hashChanged() {
    var hash = window.location.hash || defaultTab,
      $link = $('.nav-tabs a[href="' + hash + '"]');

    if ( $link.size() ) {
      $link.focus(); // Remove or comment out this if you don't want to focus on the link.
      $link.tab('show');
    }
  }

  $('.nav-tabs a').click(function (e) {
    this.blur(); // Remove or comment out this if you want the link to be kept focused.
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });

  $( window ).on( 'load hashchange', function( e ) {
    /*if ( 'load' === e.type && ! window.location.hash ) {
      // First time load; no hash; no need to re-show the default tab. =)
      return;
    }*/

    hashChanged();
  } );
});
    </script>
  </body>
</html>