tabs with links

by AJIEKCEU

HTML

<div class="tabs-lnks js-tabs">
  <a class="js-tabs__lnk" href="#tab_1">новости компании</a>
  <a class="js-tabs__lnk" href="#tab_2">отзывы</a>
  <a class="js-tabs__lnk" href="#tab_3">информация для клиентов</a>
  <a class="js-tabs__lnk" href="#tab_4">важно знать</a>
</div>
<div class="tab tab_1"><span> 1</span></div>
<div class="tab tab_2">2</div>
<div class="tab tab_3">3</div>
<div class="tab tab_4">4</div>

CSS

.tab{
  display: none;
}
.show{
  display: block;
}

JavaScript

$('.js-tabs').each(function(){
      var $links = $(this).find('.js-tabs__lnk'),
          $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]),
          $content = $('.' + $active.attr('href').replace('#',''));
      $links.removeClass('js-tabs__lnk_active');
      $active.addClass('js-tabs__lnk_active');
      $('.tab').removeClass('show');
      $content.addClass('show');
  });
  $(document).on('click', '.js-tabs__lnk', function(e){
      var $active = $('.js-tabs__lnk'),
          $content = $('.tab'),
          $links = $(this);
          $urlTab = $links.attr('href')
      $active.removeClass('js-tabs__lnk_active');
      $content.removeClass('show');
      location.hash = $urlTab;
      $active = $(this);
      $content = $('.' + $urlTab.replace('#',''));
      $active.addClass('js-tabs__lnk_active');
      $content.addClass('show');
      e.preventDefault();
  });