[Nexus]

stormur,

<style>
.tabs li.active{
  text-decoration:underline;
}
.tabs-content{
  display:none;
}
.tabs-content.active{
  display:block;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="center">
  <ul class="tabs">
    <li data-tab-id="instances" class="active"><span>Instances</span></li>
    <li data-tab-id="snapshots"><span>Snapshots</span></li>
    <li data-tab-id="iso"><span>ISO</span></li>
  </ul>

  <div class="tabs-content active" data-tab-id="instances"> Контент 1 вкладки </div>
  <div class="tabs-content" data-tab-id="snapshots"> Контент 2 вкладки </div>
  <div class="tabs-content" data-tab-id="iso"> Контент 3 вкладки </div>
</div>
<script>
$(function() {
  $('ul.tabs').on('click', 'li:not(.active)', function() {
    var $t=$(this);
    $t.addClass('active').siblings().removeClass('active')
      .closest('div.center').find('div.tabs-content').removeClass('active').filter('[data-tab-id="'+$t.data('tab-id')+'"]').addClass('active');
      ChangeUrl($t.text(),'#'+$t.data('tab-id'));
  });
  
  if(location.hash.length)
  	$('.tabs [data-tab-id="'+location.hash.substr(1)+'"]').click();
});

//А вот код для присвоения хэштега вкладке
function ChangeUrl(title, url) {
  history.pushState({
    Title: title,
    Url: url
  }, title, url);
}
</script>