4

Estou a desenvolver um website em jQuery. E até agora criei um menu simples com conteúdo a aparecer dentro de 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>

Conteúdo em 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);
    }
});

O único problema da utilização de abas (ou tabs) é que ao dar refresh na página automaticamente volta para a primeira aba, neste caso a #1.

Existe alguma maneira de, ao dar refresh, permanecer na mesma aba?

1
  • Você pode resolver isso, guardando o valor/item em exibição em LocalStorage no próprio HTML5. 29/05/2017 às 17:22

3 Respostas 3

2

Resolução:

Depois de procurar ajuda no stackoverflow inglês, consegui solucionar o meu problema. O código final ficou com este aspecto:

jQuery

Selecionar aba:

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

Continuar na mesma aba depois do 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

atualize o hash da pagina ao mudar de aba, então ao carregar a pagina verifique o 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>

1
  • Obrigado pela rápida resposta Tobias. Mas o código não funciona. A única diferença no site é que as abas agora funcionam com Ajax e antes estava a funcionar com jQuery. Penso que a hash não está a funcionar corretamente não sei o porque. Quando dou F5 na página na aba em que estava, ele volta para a primeira mas o link permanece igual (ex. index.php#2)
    – Bruno
    30/05/2017 às 9:38
0

Usando o bootstrap eu fiz desta maneira:

$('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');
1
  • Obrigado Denis, mas não estou a utilizar o Bootstrap. Estou a usar o Foundation.
    – Bruno
    30/05/2017 às 10:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .