Stay in the same tab after Refresh

Question

I am developing a website in jQuery. And so far I have created a simple menu with content to appear within Divs.

Menu

<ul class="menu" id="menu">
    <li class="menu-text"><h4>Titulo</h4></li> 
    <li class="current"><a href="#1" data-id="div1">Menu1</a></li>
    <li><a href="#2" data-id="div2">Menu2</a></li>
    <li><a href="#3" data-id="div3">Menu3</a></li>
</ul>

Content in Div’s

<div class="pbox" id="div1"> ... </div>
<div class="pbox" id="div2"> ... </div>
<div class="pbox" id="div3"> ... </div>

jQuery

$('#menu').on('click', 'a', function () {
    if(!($(this).closest('li').hasClass("current"))){
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(600);
        // fade in new selected subcontent
        $('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
    }
});

The only problem with using tabs (or tabs) is that when you refresh the page you automatically go back to the first tab, in this case the #1.

Is there any way, when refreshing, to stay in the same tab?

Answer 1

Resolution:

After searching for help in English stackoverflow, I was able to solve my problem. The final code looks like this:

jQuery

Select tab:

var menu = $('#menu');
    menu.on('click', 'a', function () {
    var current = $(this).closest('li');
    if(!current.hasClass("current")){        
    $('.current').removeClass('current');
    current.addClass("current");

    var id = $(this).attr('data-id');
    $('.pbox:visible').hide(600);
    $('#' + id + '.pbox').show(600);
    history.pushState(null, null, '#' + id);
  }
});

Continue in the same tab after refresh:

var menuId = location.hash.substring(1);
$( document ).ready(function() {
if (menuId) {
    var menu = $('#menu');
    var current = $("li[id='" + menuId + "']");
    if(!current.hasClass("current")){
    $('.current').removeClass('current');
    current.addClass("current");
    $('.pbox:visible').hide();
    $('#' + menuId + '.pbox').show(600);
    history.pushState(null, null, '#' + menuId);
}
}
});

Answer 2

update the page hash when changing tab, then when loading the page check the hash.

var menu = $('#menu');
menu.on('click', 'a', function () {
  var current = $(this).closest('li');
  if(!current.hasClass("current")){        
    $('.current').removeClass('current');
    current.addClass("current");
		
    var id = $(this).attr('data-id');		
    $('.pbox:visible').hide(600);
    $('#' + id + '.pbox').show(600);
    history.pushState(null, null, '#' + id);
  }
});

var menuId = location.hash.substring(1);
if (menuId) {
  $(menu, "li a[data-id='" + menuId + "]").trigger('click');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu" id="menu">
  <li class="menu-text"><h4>Titulo</h4></li> 
  <li class="current"><a href="#1" data-id="div1">Menu1</a></li>
  <li><a href="#2" data-id="div2">Menu2</a></li>
  <li><a href="#3" data-id="div3">Menu3</a></li>
</ul>

<div class="pbox" id="div1"> Conteudo 1 </div>
<div class="pbox" id="div2"> Conteudo 2 </div>
<div class="pbox" id="div3"> Conteudo 3 </div>

Answer 3

Using the bootstrap I did this way:

$('ul.nav-tabs li a').click(function(e){
    e.preventDefault();
    $(this).tab('show');
    window.scrollTo(0, 0);
});

$('ul.nav-tabs > li > a').on('shown.bs.tab', function(e){
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
});

var hash = window.location.hash;
$('ul.nav-tabs li a[href="' + hash + '"]').tab('show');