Семантический интерфейс - вкладки / показ URL

Question

Надеюсь, кто-нибудь может помочь ..

Я использую компонент вкладок SUI, и все работает хорошо, однако при нажатии на вкладки я хочу, чтобы URL-адрес изменялся и отображал каждую вкладку, чтобы их можно было индивидуально отслеживать в Google Analytics. Это одностраничное приложение, структура главной страницы загружается в виде / dashboard, каждая вкладка загружается из / dashboard / data-tab-name удаленно по щелчку, но в браузере отображается только / dashboard URL - поэтому аналитика Google только поднимает один URL, тогда как в приложении 5 отдельных вкладок.

Как изменить настройки, чтобы URL отражал просматриваемую вкладку?

HTML:

<div id="infotabs">
   <div class="ui tabular menu">   
        <div class="ui container backfill">
          <a class="item active tabby" data-tab="live"><i class="large home icon"></i><span class="mobile hidden">Live Power</span></a>
          <a class="item tabby"  data-tab="yesterday"><i class="large chart bar icon"></i><span class="mobile hidden">Yesterday</span></a>
          <a class="item tabby" data-tab="balance"><i class="large balance scale icon"></i><span class="mobile hidden">Balance</span></a>
          <a class="item tabby" data-tab="historic"><i class="large history icon"></i><span class="mobile hidden">Historic</span></a>
          <a class="item tabby community" data-tab="community"><i class="large users icon"></i><span class="mobile hidden">Community</span></a>
          <div class="right item prop-info hidden" id="prop-number">Prop Ref: <%=currentUser.number %></div>            
        </div>  
   </div>
</div>

<div class="ui tab basic active segment" data-tab="live"></div>
<div class="ui tab basic segment" data-tab="yesterday"></div>
<div class="ui tab basic segment" data-tab="balance"></div>
<div class="ui tab basic segment" data-tab="historic"></div>
<div class="ui tab basic segment" data-tab="community"></div> 

JS:

   $('#infotabs .menu .item')
     .tab({
       evaluateScripts : true,
       auto: true,
       path: '/dashboard/',
       ignoreFirstLoad: false,
       alwaysRefresh: false,
       onRequest: function(){
         var panel = document.getElementById('loading-panel');
         if(panel.innerHTML === '') {
           panel.innerHTML = '<h3 class=\"loader-message\">Loading data - may take a few seconds...</h3>'
         }
       },
       onLoad: function(){
        var panel = document.getElementById('loading-panel');
        panel.innerHTML = ''
       }
  });

  $('#infotabs .menu .item').tab('change tab', 'live');

Заранее спасибо за помощь.

Answer 1

Я понял это, используя библиотеку адресов Asual (V1.5) https://github.com/asual/jquery-address и понизив версию jQuery до 1.8.3, поскольку версии 1.9 и выше не поддерживаются:

<script src="https://code.jquery.com/jquery-1.8.3.min.js" integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8=" crossorigin="anonymous"></script>
<script src="/js/jquery.address-1.5.js" type="text/javascript"></script> 

А в настройках JS history & historyType:

  $('#infotabs .menu a.item')
      .tab({
        evaluateScripts : true,
        auto: true,
        path: '/dashboard/',
        history: true,
        historyType: 'hash',
        ignoreFirstLoad: false,
        alwaysRefresh: true,
        onRequest: function(){
          var panel = document.getElementById('loading-panel');
            if(panel.innerHTML === '') {
            panel.innerHTML = '<h3 class=\"loader-message\">Loading data - may take a few seconds...</h3>'
            }
        },
        onLoad: function(){
          var panel = document.getElementById('loading-panel');
          panel.innerHTML = ''
        }
      });

Затем Google Analytics можно настроить на распознавание URL-адресов истории хеша, например, / приборная панель # / live, / приборная панель # / вчера и т. д.