← Javascript

Dúvida em Tabs

Lida 3368 vezes

Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Olá a todos!

Estou com uma dúvida relativamente a tabs em jQuery.
Seja qual for a livraria que use o problema está a acontecer-me em ambas.

Aqui está o código html comum para os separadores

Código: [Seleccione]
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem <a href="index.html#tabs-2" target="_blank">ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

O que pretendo é clicar no link
Código: [Seleccione]
<a href="index.html#tabs-2" target="_blank">ipsum</a> que está no conteúdo do separador 1, e abrir uma nova janela para o separador 2.

Até  aqui não há dificuldade, o problema é que ao abrir a janela, esta desliza até ao final da tabs-2 e não é isso que pretendo, mas sim ao abrir a nova página na tabs-2, esta esteja no início do separador.

Caso queiram perceber melhor qual é o problema, aqui fica o link para o exemplo. Experimentem clicar no link dentro do separador 1 para irá abrir uma nova janela para o separador 2.

Se alguém me conseguir explicar como arranjo isto agradeço imenso.

Obrigado ;)
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Parece algo muito simples de se resolver. Ninguém tem uma sugestão? 
Offline

RonaldoFS 
Membro
Mensagens 18 Gostos 1
Troféus totais: 20
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 10 Posts First Post


Bem, o problema está na ancora que passas por href no link (index.html#tabs-2). Se tentares substituir por index.html#tabs já funciona.

Agora, a questão é: qual a utilidade actual de navegares do conteúdo de uma tab para outra, abrindo outra janela? Percebendo qual o teu objectivo final é mais fácil para responder.
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Olá Ronaldo, antes de mais obrigado pela resposta.

A dica que deste não funciona, index.html#tabs vai para o primeiro separador e não é que se pretende.

Estou a construir um site em que faz uso de tabs em jquery.
Numa página por exemplo, tem uma secção com 5 separadores com informações bem distintas.

No separador 1 contem um formulário.
No separador 2 contem um formulário de autenticação.
No separador 3 contem outro formulário.
No separador 4 contem um formulário de pagamento.
No separador 5 contem outro formulário.

Com isto, o acontece é que há outras páginas no site que contem links para estas tabs.
E o que me está a acontecer é que quando crio âncoras para o conteúdo destes separadores a página desliza para o final do separador e não para o início.

Já consegui criar links em que os separadores abrem automaticamente. E já fiquei todo contente por isso pois dá um efeito muito bom e já me resolveu parte do problema.

Por exemplo no separador 1 tem um link para o separador 2 através de href="index.php#tabs-2". Na livraria jquery ui 1.8 por exemplo, quando se clica no link para o separador 2, apenas fica registado no endereço do browser o "index.php#tabs-2" mas não muda de separador, tem que se refrescar a página. Ontem conseguir resolver este problema adicionando umas linhas de jquery.

O meu problema é a tal situação de querer deslizar para o início do segundo separador e não para o final do separador.
Mas hoje ainda vou tentar ver isso novamente tentando criar uma sub-âncora.