Utilizar duas ou mais TABS na mesma página 
Autor: Sumaia M.Gostaria de usar 2 TABS na mesma página, mas quando click em uma abre a outra.
Segue o código utilizado:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Se coloco outro com alteração dos nomes das cidades, abre sempre a primeira tabela.
Por favor, me orientem o que devo modificar.
Desde já agradeço.
Sumaia
(It > Pt) ... simples; ... você tem que diferenciar na TAB a classe, e o nome da função relacionada ...
... por exemplo, para o segundo grupo/tab:
1) - <button class="tablinks" onclick="openCity2(event, 'aaa')">aaa</button> *** etc.
2) - DIV class = "tabcontent2"
3) - function openCity2(evt, cityName) {
... e substitua o script tabcontent por tabcontent2
...
... eventualmente envie o LINK da sua página de exemplo para que seja confirmado ...
.
Autor
Muito obrigada, pela atenção.
Eu modifiquei o código, ficou muito bom, mas em analizar e otimizar o Website X5 coloca alguns erros no HTML.
Poderia me ajudar?
Está é minha página https://sumaia.com.br/batas-ciganas-masculinas-.html
O HTML é
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Trebuchet;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 9px 12px;
transition: 0.3s;
font-size: 11px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 8px 10px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<h3>Click no Tamanho</h3>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Bata Dourada P')">Bata Dourada P</button>
<button class="tablinks" onclick="openCity(event, 'Bata Dourada M')">Bata Dourada M</button>
<button class="tablinks" onclick="openCity(event, 'Bata Dourada G')">Bata Dourada G</button>
<button class="tablinks" onclick="openCity(event, 'Bata Dourada GG')">Bata Dourada GG</button>
<button class="tablinks" onclick="openCity(event, 'Bata Dourada EXG')">Bata Dourada EXG</button>
</div>
<div id="Bata Dourada P" class="tabcontent">
<h3>Bata Dourada P</h3>
<p>Item 416=R$ 99,90
<form target="_blank" action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="post">
<input type="hidden" name="email_cobranca" value="***" />
<input type="hidden" name="tipo" value="CBR" />
<input type="hidden" name="moeda" value="BRL" />
<input type="hidden" name="item_id" value="416" />
<input type="hidden" name="item_descr" value="Bata Masculina Cetim Dourada com Detalhes Dourados - Tamanho P" />
<input type="hidden" name="item_quant" value="1" />
<input type="hidden" name="item_valor" value="9990" />
<input type="hidden" name="frete" value="0" />
<input type="hidden" name="peso" value="200" />
<input type="image" src="https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</form>
</p>
</div>
<div id="Bata Dourada M" class="tabcontent">
<h3>Bata Dourada M</h3>
<p>Item 417=R$ 99,90
<form target="_blank" action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="post">
<input type="hidden" name="email_cobranca" value="***" />
<input type="hidden" name="tipo" value="CBR" />
<input type="hidden" name="moeda" value="BRL" />
<input type="hidden" name="item_id" value="417" />
<input type="hidden" name="item_descr" value="Bata Masculina Cetim Dourada com Detalhes Dourados - Tamanho M" />
<input type="hidden" name="item_quant" value="1" />
<input type="hidden" name="item_valor" value="9990" />
<input type="hidden" name="frete" value="0" />
<input type="hidden" name="peso" value="200" />
<input type="image" src="https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</form>
</p>
</div>
<div id="Bata Dourada G" class="tabcontent">
<h3>Bata Dourada G</h3>
<p>Item 418=R$ 99,90
<form target="_blank" action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="post">
<input type="hidden" name="email_cobranca" value="***" />
<input type="hidden" name="tipo" value="CBR" />
<input type="hidden" name="moeda" value="BRL" />
<input type="hidden" name="item_id" value="418" />
<input type="hidden" name="item_descr" value="Bata Masculina Cetim Dourada com Detalhes Dourados - Tamanho G" />
<input type="hidden" name="item_quant" value="1" />
<input type="hidden" name="item_valor" value="9990" />
<input type="hidden" name="frete" value="0" />
<input type="hidden" name="peso" value="200" />
<input type="image" src="https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</form>
</p>
</div>
<div id="Bata Dourada GG" class="tabcontent">
<h3>Bata Dourada GG</h3>
<p>Item 419=R$ 99,90
<form target="_blank" action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="post">
<input type="hidden" name="email_cobranca" value="***" />
<input type="hidden" name="tipo" value="CBR" />
<input type="hidden" name="moeda" value="BRL" />
<input type="hidden" name="item_id" value="419" />
<input type="hidden" name="item_descr" value="Bata Masculina Cetim Dourada com Detalhes Dourados - Tamanho GG" />
<input type="hidden" name="item_quant" value="1" />
<input type="hidden" name="item_valor" value="9990" />
<input type="hidden" name="frete" value="0" />
<input type="hidden" name="peso" value="200" />
<input type="image" src="https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</form>
</p>
</div>
<div id="Bata Dourada EXG" class="tabcontent">
<h3>Bata Dourada EXG</h3>
<p>Item 420=R$ 129,90
<form target="_blank" action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="post">
<input type="hidden" name="email_cobranca" value="***" />
<input type="hidden" name="tipo" value="CBR" />
<input type="hidden" name="moeda" value="BRL" />
<input type="hidden" name="item_id" value="420" />
<input type="hidden" name="item_descr" value="Bata Masculina Cetim Dourada com Detalhes Dourados - Tamanho EXG" />
<input type="hidden" name="item_quant" value="1" />
<input type="hidden" name="item_valor" value="12990" />
<input type="hidden" name="frete" value="0" />
<input type="hidden" name="peso" value="200" />
<input type="image" src="https://pagseguro.uol.com.br/Security/Imagens/btnComprarBR.jpg" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</form>
</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Desde já agradeço pela sua atenção.
Muito obrigada.
Sumaia
... NO! ...você não deve usar esses TAGs:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
... mas use somente o conteúdo html / script, para colar na guia HTML Code Object HTML;
... o conteúdo do TAG <style> com a exclusão, NO, das tags <style></ style>
... deve ser inserido na guia expert / CSS do mesmo Objeto de Código HTML.
... ... então você tem outras tags que estão incorretas ou não fechadas, por exemplo <p>, que você precisará verificar verificando o código ... ...
.
Autor
Você é demais.................não tenho como agradecer tanta atenção.
Muito, muito, muito, muito obrigada................
Tudo resolvido.
Sucesso!.......você merece.....................
...
...