Problema com Tabs

[Lucas Ramos]

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>

[atkins]

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...

[Lucas Ramos]

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.

[atkins]

Lucas desculpa a indelicadesa hehe, mas não entendi absolutamente nada da sua explicação, posta uma foto ae, se pah ajuda...

[Lucas Ramos]

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

[atkins]

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...

[Lucas Ramos]

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:

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.

[atkins]

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 Janeiro 27, 2013 por atkins

[Lucas Ramos]

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?

[atkins]

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 Janeiro 27, 2013 por atkins

[Lucas Ramos]

Essa parte do CSS não deu certo...Por favor,tem como deixar pronto?

E eu acho que a parte do JS vai contar também...

Editado Janeiro 27, 2013 por Lucas Ramos

[atkins]

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...