Oi pessoal!
Tenho 3 tabs criadas com JQuery, e em cada tab mostro um conteúdo diferente, são listas com paginação.
O problema é que ao clicar em “próxima”, o JQuery volta para a primeira tab, não importa em que tab eu estiver, ele sempre volta para a primeira.
O exemplo retirei deste site: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
Ilustrando o que está acontecendo, esta é a tab pagamentos, é a segunda:
Ao clicar em próxima, sou redirecionado para a primeira tab que é “transações”:
O código utilizado é este:
<script type="text/javascript">
$(document).ready(function() {
//When page loads.
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
Alguém sabe como posso permanecer na mesma tab enquanto clicar em algo de seu conteúdo?
Abraço!
O que está acontecendo é que o seu código ativa a primeira aba nas linhas 6 e 7.
Para evitar isso, você deve identificar qual aba você quer exibir e fazer a troca manualmente no ato de carregamento da página.
Vamos supor que você esteja fazendo em php e que sua página seja www.seudominio/minhaconta.php
Bastaria jogar um parâmetro na url do tipo:
E o código identificar qual a aba e fazer a troca pode ser algo assim:
<?php
// Cataloga possiveis abas;
$abas[1] = "tab_header_1";
$abas[2] = "tab_header_2";
$abas[3] = "tab_header_3";
$abas[4] = "tab_header_4";
// Verifica se foi passado parametro, caso contrario inserir a aba padrão
if(isset($_REQUEST['aba']) && is_numeric($_REQUEST['aba'])){
$id_tab_exibir = $abas[$_REQUEST['aba']];
}else{
$id_tab_exibir = $abas[1]
}
?>
mas para dar certo, você terá que adaptar seu código javascript da seguinte forma:
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
//On Click Event
$("ul.tabs li").click(function() {
changeTab("#"+this.id)
return false;
});
// Alterar abas
function changeTab(newTab){
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(newTab).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(newTab).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
}
// Definir qual aba será mostrada de acordo com o parâmetro passado pela url
changeTab("#<?php echo $id_tab_exibir; ?>");
});
Repare que na ultima linha você executa a função para trocar de abas e passa um parametro que deve ser o ID da aba, que você deve inserir no seu código HTML como demonstrado abaixo:
Olá leoap86!
Eu estou usando esse código numa JSP, infelizmente não consegui adaptar a sua idéia para o meu caso. Acredito que precise injetar o a id da tab (#tab1, #tab2, #tab3) no request para que ao dar o reload possa capturar esse valor, e ai carregar a tab correta usando um if(). Estou procurando na DOC uma forma de fazer isso funcionar, mas ainda não descobri como deve ser feito. http://jqueryui.com/demos/tabs/
Obrigado pela dica, se souber como implementar a idéia para JSP me avise.
Abraço!
Olá windsofhell!
O seu código está igual ao meu, se clicar na paginação da segunda tab, volta pra primeira tab ao invés de carregar na mesma. Com vc acontece o mesmo?
Acho que precisa de algo nas primeiras linhas, pq ao paginar, está especificado que é pra ir para a 1ª tab.
Abraço!
esse código jquery ai foi criado para ser usado com ajax…
e você poderia fazer isso:
1 - no JS crie um evento Onclick Event para o botão proxima,
2 - nesse evento, pegue a url do botão e faça uma requisição ajax.
3 - no fim do ajax atualize o conteudo…
vai dar um pouquinho de trabalho…mas seu sistema ficará mais rápido e interativo
