Ir para conteúdo
Fórum Script Brasil
  • 0

Problema com Tabs


Lucas Ramos

Pergunta

Eu quero separar totalmente duas tabs (para que ambas trabalhem de forma diferente) em uma postagem (Blogger - HTML) ,mas não consigo,quando vou conferir,é como se elas fossem uma só.

Código original:

<ul id="tabs">

<li><a href="#" name="tab1">One</a></li>

<li><a href="#" name="tab2">Two</a></li>

<li><a href="#" name="tab3">Three</a></li>

<li><a href="#" name="tab4">Four</a></li>

</ul>

<div id="content">

<div id="tab1">...</div>

<div id="tab2">...</div>

<div id="tab3">...</div>

<div id="tab4">...</div>

</div>

Daí,na parte de criar postagem HTML,eu apenas acrescento o mesmo código,só mudo o texto.

Ficando assim:

<ul id="tabs">

<li><a href="#" name="tab1">One</a></li>

<li><a href="#" name="tab2">Two</a></li>

<li><a href="#" name="tab3">Three</a></li>

<li><a href="#" name="tab4">Four</a></li>

</ul>

<div id="content">

<div id="tab1">...</div>

<div id="tab2">...</div>

<div id="tab3">...</div>

<div id="tab4">...</div>

</div>

<ul id="tabs">

<li><a href="#" name="tab1">One</a></li>

<li><a href="#" name="tab2">Two</a></li>

<li><a href="#" name="tab3">Three</a></li>

<li><a href="#" name="tab4">Four</a></li>

</ul>

<div id="content">

<div id="tab1">...</div>

<div id="tab2">...</div>

<div id="tab3">...</div>

<div id="tab4">...</div>

</div>

Link para o comentário
Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

  • 0

Amigo fica claro que não vai mudar mesmo, você esta colocando id igual... Não sei se você sabe como funciona, mas o id só pode ser usado 1 unica vez, ele só recebe um tipo de indicação, se você colocar em outros o mesmo id, ele simplesmente vai clonar o anterior...

Link para o comentário
Compartilhar em outros sites

  • 0
Amigo fica claro que não vai mudar mesmo, você esta colocando id igual... Não sei se você sabe como funciona, mas o id só pode ser usado 1 unica vez, ele só recebe um tipo de indicação, se você colocar em outros o mesmo id, ele simplesmente vai clonar o anterior...

É que tipo essas duas Tabs se ''unem'' daí,só aparece o conteúdo da primeira,e na segunda não aparece conteúdo apenas os botões. E quando clico em algum botão da tab abaixo,por exemplo botão 2, na tab de cima também vai pro botão 2 (caso esteja no 1) e assim por diante. Elas não funcionam de maneira separada.

Link para o comentário
Compartilhar em outros sites

  • 0

Bom,realmente o problema é com o ID mesmo...

Aqui estão os códigos originais:

CSS

#tabs{

overflow: hidden;

width: 100%;

margin: 0;

padding: 0;

list-style: none;

}

#tabs li{

float: left;

margin: 0 .5em 0 0;

}

#tabs a{

position: relative;

background: #ddd;

background-image: linear-gradient(to bottom, #fff, #ddd);

padding: .7em 3.5em;

float: left;

text-decoration: none;

color: #444;

text-shadow: 0 1px 0 rgba(255,255,255,.8);

border-radius: 5px 0 0 0;

box-shadow: 0 2px 2px rgba(0,0,0,.4);

}

#tabs a:hover,

#tabs a:hover::after,

#tabs a:focus,

#tabs a:focus::after{

background: #fff;

}

#tabs a:focus{

outline: 0;

}

#tabs a::after{

content:'';

position:absolute;

z-index: 1;

top: 0;

right: -.5em;

bottom: 0;

width: 1em;

background: #ddd;

background-image: linear-gradient(to bottom, #fff, #ddd);

box-shadow: 2px 2px 2px rgba(0,0,0,.4);

transform: skew(10deg);

border-radius: 0 5px 0 0;

}

#tabs #current a,

#tabs #current a::after{

background: #fff;

z-index: 3;

}

#content

{

background: #fff;

padding: 2em;

height: 220px;

position: relative;

z-index: 2;

border-radius: 0 5px 5px 5px;

box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

}

Jquery

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>

$(document).ready(function() {

$("#content div").hide(); // Initially hide all content

$("#tabs li:first").attr("id","current"); // Activate first tab

$("#content div:first").fadeIn(); // Show first tab content

$('#tabs a').click(function(e) {

e.preventDefault();

if ($(this).closest("li").attr("id") == "current"){ //detection for current tab

return

}

else{

$("#content div").hide(); //Hide all content

$("#tabs li").attr("id",""); //Reset id's

$(this).parent().attr("id","current"); // Activate this

$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab

}

});

});

</script>

Bom,agora pra transformar isso em class? Creio que seja esse o problema...

Aqui é o site onde peguei os códigos: http://www.red-team-design.com/css3-jquery-folder-tabs

Link para o comentário
Compartilhar em outros sites

  • 0

Então, pelo que estou entendendo, você tem um lugar de post, que é de uma tab, e um lugar com uns botoes que eu não tenho a minima ideia do que são, na segunda tab...

Olha por mais que você me dê os códigos, não ta rolando, preciso que você tire uma foto do problema ocorrendo, assim eu posso ter uma visão certa do problema e resolver rapidamente...

Link para o comentário
Compartilhar em outros sites

  • 0
Então, pelo que estou entendendo, você tem um lugar de post, que é de uma tab, e um lugar com uns botoes que eu não tenho a minima ideia do que são, na segunda tab...

Olha por mais que você me dê os códigos, não ta rolando, preciso que você tire uma foto do problema ocorrendo, assim eu posso ter uma visão certa do problema e resolver rapidamente...

Pronto,aqui está a foto:

14j26vt.png

Se você reparar,essas duas TABs estão na área de postagem,OK. Agora repare que elas tem 2 botões (one e two). No botão 1 da primeira TAB,tem um determinado conteúdo e no segundo botão dela (two) ,tem outro conteúdo oculto,que só aparece quando o botão two é clicado.(funciona normalmente)

Agora tem outra TAB abaixo,e note que ela está vazia,sem conteúdo,tanto no botão one como no two. Caso eu clicar no botão two dessa TAB abaixo,ao invés de mostrar o conteúdo nela,mostra o conteúdo do botão two da TAB acima. E caso eu clicar depois no botão one,ao invés de aparecer o conteúdo nela,aparece o conteúdo do botão one da TAB acima.

OU SEJA,O botão da TAB abaixo,serve basicamente pra mostrar os conteúdos da TAB acima,pra você entender melhor tanto faz eu clicar no botão da TAB acima,quanto nos botões da TAB abaixo,pois o conteúdo só vai aparecer na TAB acima.

É só esse o problema. O que eu queria,era que Cada TAB mostrasse seu conteúdo separadamente.

Link para o comentário
Compartilhar em outros sites

  • 0

Aaahh entendi hehe... desculpa tantos pedidos, é que eu to respondendo 4 duvidas no forum ao mesmo tempo e fica dificil de visualizar hehe... Ainda mais tab que da pra você fazer de tudo com ela... Mas vamos la...

Esse problema é simples, eu trabalhei muito com tab já hehe, e sei lhe dizer que é bem tranquilo para resolver hehe...

Como eu estava lhe dizendo anteriormente, o id="" ele deve ser único, de maneira alguma pode haver 2 itens com o mesmo id, pois o segundo irá clonar o primeiro... é por isso que ele só mostra na primeira parte...

O fato é que o problema não é nem o id="tab1", id="tab2"... Na verdade é sim, hehe, não vou confundir voce hauhauhaua... mas o que esta ocorrendo é que o id="Content" ele clona o primeiro pro segundo... por isso que quando você clica no segundo, muda o primeiro... Só que se você só mudar o content, e não mudar as tabs, vai continuar dando o mesmo problema... os tabs debaixo vao continuar simplesmente mudando o primeiro...

Bom vou parar de enrolar e vamos resolver hehe, faça assim:

Os itensa da segunda parte, você muda de content para content2, e os tab vc continua, tipo tab5, tab6 e tal... assim você ira resolver o problema...

Editado por atkins
Link para o comentário
Compartilhar em outros sites

  • 0
Aaahh entendi hehe... desculpa tantos pedidos, é que eu to respondendo 4 duvidas no forum ao mesmo tempo e fica dificil de visualizar hehe... Ainda mais tab que da pra você fazer de tudo com ela... Mas vamos la...

Esse problema é simples, eu trabalhei muito com tab já hehe, e sei lhe dizer que é bem tranquilo para resolver hehe...

Como eu estava lhe dizendo anteriormente, o id="" ele deve ser único, de maneira alguma pode haver 2 itens com o mesmo id, pois o segundo irá clonar o primeiro... é por isso que ele só mostra na primeira parte...

O fato é que o problema não é nem o id="tab1", id="tab2"... Na verdade é sim, hehe, não vou confundir voce hauhauhaua... mas o que esta ocorrendo é que o id="Content" ele clona o primeiro pro segundo... por isso que quando você clica no segundo, muda o primeiro... Só que se você só mudar o content, e não mudar as tabs, vai continuar dando o mesmo problema... os tabs debaixo vao continuar simplesmente mudando o primeiro...

Bom vou parar de enrolar e vamos resolver hehe, faça assim:

Os itensa da segunda parte, você muda de content para content2, e os tab vc continua, tipo tab5, tab6 e tal... assim você ira resolver o problema...

Apareceu isso :

http://i49.tinypic.com/2q8sw9k.png

Porém já tinha feito algo parecido...

Na TAB abaixo mostrou o conteúdo,ok,mas os botões dela continua com o mesmo problema,mostrando o conteúdo na primeira.

Fora que não mostrou o background do content esse maior.

Eu fiz assim:

<ul id="tabs">

<li><a href="#" name="tab1">One</a></li>

<li><a href="#" name="tab2">Two</a></li>

</ul>

<div id="content">

<div id="tab1">...</div>

<div id="tab2">...</div>

</div>

<ul id="tabs">

<li><a href="#" name="tab1">One</a></li>

<li><a href="#" name="tab2">Two</a></li>

</ul>

<div id="content2">

<div id="tab3">...</div>

<div id="tab4">...</div>

</div>

É desse jeito mesmo?

Link para o comentário
Compartilhar em outros sites

  • 0

O fundo é porque você determinou o css para aquele primeiro e o segundo antes tinha levado junto... agr voce precisa determinar o css do segundo tb...

E o segundo erro é que deveria ser assim:

<ul id="tabs">

<li><a href="#" name="tab1">One</a></li>

<li><a href="#" name="tab2">Two</a></li>

</ul>

<div id="content">

<div id="tab1">...</div>

<div id="tab2">...</div>

</div>

<ul id="tabs2">

<li><a href="#" name="tab3">One</a></li>

<li><a href="#" name="tab4">Two</a></li>

</ul>

<div id="content2">

<div id="tab3">...</div>

<div id="tab4">...</div>

</div>

O css é assim:

#content, content2

{

background: #fff;

padding: 2em;

height: 220px;

position: relative;

z-index: 2;

border-radius: 0 5px 5px 5px;

box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

}

Além de você ter que mudar as tabs tb...

Editado por atkins
Link para o comentário
Compartilhar em outros sites

  • 0

Então Lucas essa parte do css não vai funcionar mesmo, porque você tem que determinar tudo que é do de baixo, diferente do de cima, ou nada irá adiantar...

Sinto muito mas agr não posso deixar tudo pronto agr, estou com um projeto aqui que ta me custando para terminar...

Qualquer coisa, se depois de você mudar tudo não der certo, você posta aqui que vejo se consigo fazer para você...

Abraços e boa sorte...

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...