Estou recebendo muitas reclamações dos usuários de que, quando estão usando minhas guias baseadas em jQuery, eles acham irritante que, quando revidam no navegador, não vão para a guia anterior, mas para a página anterior . Eu adicionei os seguintes botões anterior / seguinte, mas não o suficiente. Como reconfigurar meus botões para que os usuários acessem a guia anterior e não a página anterior quando clicam na seta para trás do navegador. Você pode testá-lo aqui .
$('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>');
$('.tablink-prev').click(function () {
var index = $('.quicktabs-tabs li.active').index();
$('.quicktabs-tabs li').eq(index).removeClass('active');
if (index == 0) {
index = 1;
}
$('.quicktabs-tabs li').eq(index - 1).addClass('active');
$('.quicktabs-tabs li').eq(index - 1).find('a').click();
return false;
});
$('.tablink-next').click(function () {
var length = $('.quicktabs-tabs').first().children().size();;
var index = $('.quicktabs-tabs li.active').index();
$('.quicktabs-tabs li').eq(index).removeClass('active');
// if (parseInt(index) == parseInt(length) - 1 ) {
// index = index - 1;
// }
if (parseInt(index) == parseInt(length) - 1) {
window.location.href = '/home'; //redirect to home
//index = index - 1;
}
$('.quicktabs-tabs li').eq(index + 1).addClass('active');
$('.quicktabs-tabs li').eq(index + 1).find('a').click();
return false;
});
javascript
jquery
Efe
fonte
fonte
Respostas:
Você pode usar o histórico.
Envie um estado do histórico quando uma nova guia for aberta
Referência: https://developer.mozilla.org/en-US/docs/Web/API/History_API
fonte
Sem o seu código completo, não posso dar um exemplo personalizado, mas você pode simplesmente adicionar tags âncora a cada guia que contém div.
Isso atualizará o URL sempre que um usuário clicar em um link de guia. Essas alterações de URL serão armazenadas no histórico do navegador e serão recuperadas ao navegar para trás.
O URL atualizado terá esta aparência sempre que você clicar em uma guia:
https://example.com#Tab1https://example.com#Tab2https://example.com#Tab3https://example.com#Tab4fonte
por um lado, sua próxima função de guia é escrita em javascript e, por outro lado, o botão voltar no navegador usa o histórico do navegador, portanto isso é irrelevante para suas funções e não pode levá-lo à guia anterior.
Então você tem duas maneiras de fazer isso acontecer:
1º: tente carregar cada etapa em uma página diferente atualizando o navegador, para que a página seja salva no histórico do navegador e, pressionando o botão Voltar, você poderá ver a etapa anterior
Segundo: você deve ter um botão "anterior" para ver a etapa anterior, assim como o botão da próxima etapa
fonte
Eu usei abas bootsrap com a navegação da guia do navegador abaixo, é o exemplo completo
Você pode verificar o exemplo ao vivo do meu código
1> Acesse https://www.notesgen.com (use a área de trabalho)
2> Crie sua conta como aluno
3> Ir para minha conta / meus downloads
4> Clique em Minhas conexões
fonte
Alterar o hash é semelhante ao estado de
history.pushStateenvio que aciona opopstateevento. Pressionar para frente e para trás no navegador abrirá e empurrará esses estados para que você não precise de nenhum outro manipulador personalizado.PS: Você pode adicionar estilo css
:targetda suaactiveclasse. Owindow.addEventListener('popstate'aqui apenas registra para mostrar o evento, mas oevent.statesempre será nulo neste caso.Execute o snippet de código, tente navegar pelas guias e use os botões voltar e avançar do navegador.
fonte
a primeira coisa que você precisa, impeça o link de enviar o URL no histórico por $ event.preventDefualt () no evento click e personalize o histórico com history.pushState (dados, título, URL) .
Em js, temos um evento que nos ajuda a controlar o evento de retorno e encaminhamento pelo usuário. Este nome do evento é "popstate". você pode usá-lo por window.addEventListener ('popstate', retorno de chamada) . na função de retorno de chamada, você pode ativar e desativar a guia (adicionar e remover classe) e extrair o URL.
Eu mostro isso com um código de exemplo. para fazer e entender melhor, tente em um servidor ou servidor local, porque a mudança de URL aqui é limitada:
fonte