Как реализовать якорный переход на одну из вкладок на странице?

Question

[Sinner3]

Добрый день хочу реализовать функционал при клике на ссылке

<a class="btn-border" href="#features">Подробные характеристики</a>

Переходить и открывать вкладку с data-tab="features"
Структура вкладок

<div class="widget tabs">
  <div id="horizontal-tabs">
    <ul class="tabs">
      <li id="tab1" data-tab="detail" class="current" ><a href="#detail">Описание</a></li>
      <li id="tab2" data-tab="features"><a href="#features">Характеристики</a></li>
      <li id="tab3" data-tab="video"><a href="#video">Видео</a></li>
      <li id="tab4" data-tab="sup_oborud"><a href="#sup_oborud">Сопутствующее оборудование</a></li>
      <li id="tab5" data-tab="design_features"><a href="#design_features">Конструктивные особенности</a></li>
    </ul>
    <div class="contents">
      <div class="tabscontent"  data-tab="detail" id="content1 " > 
        <!--описание характеристики начало--> 
        Описание
        <!--описание характеристики начало--> 
      </div>
      <div class="tabscontent" data-tab="features" id="content2 features"> 
        таблица<!--технические характеристики начало--> 
        
        <!--технические характеристики конец--> 
      </div>
   
    <div class="tabscontent" data-tab="video" id="content3">
      <div class="video"> 
        <!--видео характеристики гачало-->
        <iframe width="640" height="480" src="//www.youtube.com/embed/-yjIppthPAA?rel=0" frameborder="0" allowfullscreen=""></iframe>
        <!--видео характеристики конец--> 
      </div>
    </div>
    <div class="tabscontent"  data-tab="sup_oborud" id="content4"> 
      <!--начало--> 
      Сопутствующее оборудование
      <!--конец--> 
    </div> 
    <div class="tabscontent" data-tab="design_features" id="content5">Конструктивные решения</div></div>
  </div></div>

Скрипт работы вкладок

// JavaScript Document
$(document).ready(function() {
	var loc = window.location.hash;
if (loc != "") {
        var href = loc;
        href = href.replace('#','');
        var target = $('.tabs').find(href);
        $('.tabs li').removeClass('current');       
        $('.tabs li[data-tab="'+href+ '"]').addClass('current');
        $('.tabscontent').hide();
        $('div[data-tab="'+href+ '"]').fadeIn('slow');
        }
		else
		{
			$('.tabscontent').hide();
			$('.tabs li[data-tab="detail"]').addClass('current');
			$('div[data-tab="detail"]').fadeIn('slow');
			}
});

Примерный функционал реализован у Юрмарт на сайте, при описании товара

Answer 1

[Дмитрий Беляев]

cамый простой способ - отслеживать изменение хэша через $(window).on('hashchange', function(){});