0

Есть три вкладки с контентом, и четвертая новая (All) хочу сделать так чтобы при нажатии на All отобразился контент трех вкладок.

Я конечно мог бы в самом html cоздать div c названием All поместить контент всех вкладок туда, но думаю это плохая идея, потому что вкладок может быть штук 15 например или даже больше и на каждой страничке контент может быть очень большой, получится слишком большая html страница, возможно даже на несколько тысяч строк, если много контента...

Мне кажется наверное это можно как-то реализовать с помощью несколькоми строками на JS. Но как?

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";
}


document.getElementById("defaultOpen").click();

Весь код в песочнице:
https://jsfiddle.net/nathan111777/5dzrqu3b/4/

2 ответа 2

1

function openCity(evt, cityName = undefined) {
  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";
}

function showCity(event){
  tabcontent = document.getElementsByClassName("tabcontent");
  
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "block";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  event.target.className += " active";
}


document.getElementById("defaultOpen").click();
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}


.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  <button class="tablinks" onclick="showCity(event)">All</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>

0

Цикл for всего лишь берет код и кругами выполняет его. Так что

for( let i = 0; i < link.length; i++ ){
  tab[i].style.display = 'block';
}

то же самое, что и

tab[0].style.display = 'block';
tab[1].style.display = 'block';
tab[2].style.display = 'block';

При клике на кнопку - надо было циклом пройтись и по очереди показывать всё.

"Потому что вкладок может быть штук 15 например" — В таком случае можно задолбаться и с редакцией id и onclick... легче привязать переключения к конкретному классу:

let link = document.querySelectorAll('.link');
let tab  = document.querySelectorAll('.tab');
let all  = document.getElementById('all');
for( let i = 0; i < link.length; i++ ){
  link[i].addEventListener('click', function(){
    for( let j = 0; j < tab.length; j++ ){
      link[j].classList.remove('active');
      tab[j].style.display = 'none';
    }
    all.classList.remove('active');
    
    this.classList.add('active');
    tab[i].style.display = 'block';
  });
}

/******/

all.addEventListener('click', function(){
  for( let j = 0; j < link.length; j++ ){
    link[j].classList.remove('active');
    tab[j].style.display = 'block';
  }
  this.classList.add('active');
});
.tab {
  display: none;
  margin: 10px;
  border: 1px solid red;
} 

.link.active, #all.active { 
  color: red;
}
<button class="link active">1111</button>
<button class="link">2222</button>
<button class="link">3333</button>
<button id="all">All</button>

<div class="tab" style="display: block;">вкладка-1</div>
<div class="tab">вкладка-2</div>
<div class="tab">вкладка-3</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.