Impedir alteração de tab no JQuery

GUJ Master Membro desde: 24/02/2009 17:56:09 Mensagens: 1023 Offline

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:

Alguém sabe como posso permanecer na mesma tab enquanto clicar em algo de seu conteúdo?
Abraço!

What is classpath? Membro desde: 26/09/2011 10:51:13 Mensagens: 5 Offline

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:

www.seudominio/minhaconta.php?aba=1
www.seudominio/minhaconta.php?aba=2
www.seudominio/minhaconta.php?aba=3

E o código identificar qual a aba e fazer a troca pode ser algo assim:

mas para dar certo, você terá que adaptar seu código javascript da seguinte forma:

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:

Espero ter ajudado...

GUJ Master Membro desde: 24/02/2009 17:56:09 Mensagens: 1023 Offline

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!

What is classpath? Membro desde: 26/09/2011 10:51:13 Mensagens: 5 Offline

eu não sou muito adentrado no JSP, procure pela função request.getParameter() para obter os parametros da url.

Fiz um teste aqui e funcionou de boa, ai vai o meu codigo:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		
		<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() {

$("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

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
					$(activeTab).fadeIn(); //Fade in the active ID content
					return false;
				});

});		
		
		</script>
		
		<style>
			ul.tabs {
				margin: 0;
				padding: 0;
				float: left;
				list-style: none;
				height: 32px; /*--Set height of tabs--*/
				border-bottom: 1px solid #999;
				border-left: 1px solid #999;
				width: 100%;
			}
			ul.tabs li {
				float: left;
				margin: 0;
				padding: 0;
				height: 31px; /*--Subtract 1px from the height of the unordered list--*/
				line-height: 31px; /*--Vertically aligns the text within the tab--*/
				border: 1px solid #999;
				border-left: none;
				margin-bottom: -1px; /*--Pull the list item down 1px--*/
				overflow: hidden;
				position: relative;
				background: #e0e0e0;
			}
			ul.tabs li a {
				text-decoration: none;
				color: #000;
				display: block;
				font-size: 1.2em;
				padding: 0 20px;
				border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
				outline: none;
			}
			ul.tabs li a:hover {
				background: #ccc;
			}
			html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
				background: #fff;
				border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
			}
			
			.tab_container {
				border: 1px solid #999;
				border-top: none;
				overflow: hidden;
				clear: both;
				float: left; width: 100%;
				background: #fff;
			}
			
			.tab_content {
				padding: 20px;
				font-size: 1.2em;
			}			
		</style>
	<head>
	<body>
	
		<ul class="tabs">
			<li><a href="#tab1">Gallery</a></li>
			<li><a href="#tab2">Submit</a></li>
		</ul>

<div class="tab_container">
			<div id="tab1" class="tab_content">
				Content 1
			</div>
			<div id="tab2" class="tab_content">
			   Content 2
			</div>
		</div>
	
	</body>
</html>

GUJ Master Membro desde: 24/02/2009 17:56:09 Mensagens: 1023 Offline

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!

JavaGuru Membro desde: 28/02/2009 18:49:47 Mensagens: 217 Offline

Alguem achou alguma solução para este problema?

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

use enquanto ajax ta na moda rs

Notícias, artigos e o maior fórum brasileiro sobre Java