1

Como posso fazer uma dupla de tab na mesma página, mantendo os conteúdos abertos e alternando apenas entre cada dupla? quero alternar apenas entre o conteúdo de London e Paris / Tokyo e Dublin, mas quando abro algum da segunda fileira o da primeira fecha, queria que ficasse aberto também e alternasse apenas entre os dois, estou tentando nesse código, alguma outra forma posso alternar conteúdo de duas tabs separadas sem uma alterar a outra em uma mesma página?

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



<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  

</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. </p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. .</p> 
</div>





<div class="tab">

 <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    <button class="tablinks" onclick="openCity(event, 'Dublin')">Dublin</button></div>


<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>TLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. </p>
</div>


<div id="Dublin" class="tabcontent">
  <h3>Dublin</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. </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> 

]1]1

1 Resposta 1

0

Ao usar o getElementsByClassName("tabcontent") ele seleciona todos os elementos com a classe tabcontent, sendo assim para resolver é só agrupar adicionando outra classe no HTML e passando ela como parametro na função:

<!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>
<div class="tab">
  <button class="tablinks group1" onclick="openCity(event, 'London', 'group1')">London</button>
  <button class="tablinks group1" onclick="openCity(event, 'Paris', 'group1')">Paris</button>
</div>

<div id="London" class="tabcontent group1">
  <h3>London</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. </p>
</div>

<div id="Paris" class="tabcontent group1">
  <h3>Paris</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. .</p> 
</div>
<div class="tab">
 <button class="tablinks group2" onclick="openCity(event, 'Tokyo', 'group2')">Tokyo</button>
    <button class="tablinks group2" onclick="openCity(event, 'Dublin', 'group2')">Dublin</button></div>
<div id="Tokyo" class="tabcontent group2">
  <h3>Tokyo</h3>
  <p>TLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ut posuere nunc, in condimentum lorem. </p>
</div>
<div id="Dublin" class="tabcontent group2">
  <h3>Dublin</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu in tellus ultricies, vel ultrices quam egestas. Proin luctus nec lacus vitae sollicitudin. Aliquam sed porttitor nisl. Curabitur hendrerit metus nunc, id laoreet magna iaculis molestie. </p>
</div>
<script>
function openCity(evt, cityName, group) {
  var i, tabcontent, tablinks;
  tabcontent = document.querySelectorAll(".tabcontent."+group);
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.querySelectorAll(".tablinks."+group);
  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> 

5
  • só isso? não pode comentar o que foi feito, qual o problema, como resolve? Commented 6/05/2020 às 13:33
  • Obrigado, tem alguma função que posso fazer o botão Tokyo ficar já selecionado ao carregar a minha página? O primeiro, London, eu consegui mas o Tokyo não
    – gau
    Commented 6/05/2020 às 16:26
  • É só adicionar a classe active no botão que você quer que fique selecionado, e por style="display:block" na aba que você quer que já venha aberta.
    – TiagoA
    Commented 6/05/2020 às 18:17
  • mas aí o botão se mantém selecionado mesmo estando fechado, certo? mesmo eu indo pro outro botão fica a cor de estar selecionado
    – gau
    Commented 6/05/2020 às 21:05
  • Não vai ficar, pois a função remove a classe active do outro.
    – TiagoA
    Commented 6/05/2020 às 22:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .