var tabs = $('.tab').click(function () {
  tabs.hide().filter(this.hash).show();
}).map(function () {
  return $(this.hash)[0];
});

$('.tab:first').click();

/*global $*/

// a temp value to cache *what* we're about to show
var target = null;

// collect all the tabs
var tabs = $('.tab').on('click', function () {
  console.log('click')
  target = $(this.hash).removeAttr('id');
  if (location.hash === this.hash) {
    setTimeout(update);
  }
}).attr('tabindex', '0');

// get an array of the panel ids (from the anchor hash)
var targets = tabs.map(function () {
  return this.hash;
}).get();

// use those ids to get a jQuery collection of panels
var panels = $(targets.join(',')).each(function () {
  // keep a copy of what the original el.id was
  $(this).data('old-id', this.id);
});

function update() {
  console.log('update')
  if (target) {
    target.attr('id', target.data('old-id'));
    target = null;
  }
  
  var hash = window.location.hash;
  if (targets.indexOf(hash) !== -1) {
    return show(hash);
  }
  
  // NOTE: this was added after the article was written
  // to fix going "back" on the browser nav to an empty state
  if (!hash) {
    show();
  }
}

function show(id) {
  // if no value was given, let's take the first panel
  if (!id) {
    id = targets[0];
  }
  // remove the selected class from the tabs,
  // and add it back to the one the user selected
  tabs.removeClass('selected').attr('aria-selected', 'false').filter(function () {
    return (this.hash === id);
  }).addClass('selected').attr('aria-selected', 'true');

  // now hide all the panels, then filter to
  // the one we're interested in, and show it
  panels.hide().attr('aria-hidden', 'true').filter(id).show().attr('aria-hidden', 'false');
}

window.addEventListener('hashchange', update);

// initialise
if (targets.indexOf(window.location.hash) !== -1) {
  update();
} else {
  show();
}

<ul role="tablist" class="tabs">
    <li><a role="tab" aria-controls="dizzy" class="tab" href="#dizzy">Dizzy</a></li>
    <li><a role="tab" aria-controls="ninja" class="tab" href="#ninja">Ninja</a></li>
    <li><a role="tab" class="tab" aria-controls="missy" href="#missy">Missy</a></li>
  </ul>

  <div role="tabpanel" class="panel" id="dizzy">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/dizzy.jpg" alt="Photo of Dizzy">
    <dl>
      <dt>Name</dt>
      <dd>Dizzy</dd>
      <dt>Colour</dt>
      <dd>Tabby</dd>
      <dt>Super power</dt>
      <dd>Sleeping</dd>
    </dl>
  </div>
  <div role="tabpanel" class="panel" id="ninja">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/ninja.jpg" alt="Photo of Ninja">
    <dl>
      <dt>Name</dt>
      <dd>Lord Ninja of Catville</dd>
      <dt>Colour</dt>
      <dd>Black & White</dd>
      <dt>Super power</dt>
      <dd>Most pathetic meow known to catkind</dd>
    </dl>
  </div>
  <div role="tabpanel" class="panel" id="missy">
    <img src="https://jsbin-user-assets.s3.amazonaws.com/rem/missy.jpg" alt="Photo of Missy">
    <dl>
      <dt>Name</dt>
      <dd>Missy</dd>
      <dt>Colour</dt>
      <dd>Black</dd>
      <dt>Super power</dt>
      <dd>Computer hardware protection</dd>
    </dl>
  </div>