Problema com Tabs

[Lucas Ramos_168509 0]

Eu quero separar totalmente duas tabs 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>

[Lucas Ramos_168509 0]

Pra ser mais claro,eu acho que o problema deve estar no ID

 

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

 

 

O problema é que quando vou acrescentar outra TABS abaixo (como demonstrado no HTML acima),elas funcionam como uma só (deve ser o ID),agora como faço pra transformar em class?

 

Acho que com o CSS,deve só substituir # por um .

 

agora o JQUERY?

 

 

<script src="[url=http://code.jquery.com/jquery-1.7.2.min.js]http://code.jquery.com/jquery-1.7.2.min.js [/url]"></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>

[William Bruno 1501]

se estão no mesmo documento, vc não pode de maneira nenhuma repetir os IDs.

 

Continue:

<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="tab5">One</a></li>
<li><a href="#" name="tab6">Two</a></li>
<li><a href="#" name="tab7">Three</a></li>
<li><a href="#" name="tab8">Four</a></li>
</ul>

<div id="content">
<div id="tab5">...</div>
<div id="tab6">...</div>
<div id="tab7">...</div>
<div id="tab8">...</div>
</div>

entendeu ?