Stay in the same tab after Refresh

Asked

Viewed 846 times

4

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?

  • You can solve this by saving the value/item displayed in Localstorage in HTML5 itself.

3 answers

2


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);
}
}
});

1

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>

  • Thanks for the quick reply Tobias. But the code does not work. The only difference on the site is that the tabs now work with Ajax and before was working with jQuery. I think the hash is not working properly do not know why. When I give F5 on the page in the tab it was in, it goes back to the first one but the link remains the same (e.g. index.php#2)

0

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');
  • Thanks Denis, but I’m not using Bootstrap. I’m using Foundation.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.