Используйте вертикальную вкладку для переключения несколько раз - PullRequest
Новая
       9

Используйте вертикальную вкладку для переключения несколько раз

0 голосов
/ 05 апреля 2020

Мне нужен раздел вкладок с вертикальным меню. Я начал с базового скрипта w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs, настроил и улучшил его.

Теперь у меня проблема, что мне нужен этот раздел переключателей несколько раз на одном сайте. Поэтому я создал родительский элемент div вокруг раздела с уникальным идентификатором.

Для сценария теперь мне нужно получить только элементы в этом родительском элементе, поэтому я попытался вызвать их с помощью родительского элемента вместо «документа», но это не будет работать для меня. 

function toggleTabs(evt, tabID, itemID) {
  var i, tabcontent, tablinks, wrapper;
  wrapper = document.getElementById('item' + itemID);

  tabcontent = wrapper.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = wrapper.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  wrapper.getElementById(tabID).style.display = "block";
  evt.currentTarget.className += " active";
}

Один табсекция (работает) https://jsfiddle.net/029mua5h/

Несколько табсекций (не работает) https://jsfiddle.net/029mua5h/1/

1 Ответ

0 голосов
/ 05 апреля 2020

wrapper.getElementById(tabID).style.display = "block"; не работает. Это потому, что .getElementById не является прототипом отдельного элемента. Поскольку идентификаторы должны быть уникальными, нет смысла искать идентификатор внутри элемента, потому что мы знаем, что может быть только один элемент с идентификатором spesifi c. поэтому мы должны использовать правильные document.getElementById(tabID).style.display = "block";

function toggleTabs(evt, tabID, itemID) {
  var i, tabcontent, tablinks, wrapper;
  wrapper = document.getElementById('item' + itemID);

  tabcontent = wrapper.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = wrapper.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabID).style.display = "block";
  evt.currentTarget.className += " active";
}
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

.tabwrapper {
  display: flex;
  flex-direction: row;
  
}
/* Style the tab */
.tablinks {
  display: flex;
  border: 1px solid #ccc;
  border-right:0;
  background-color: #f1f1f1;
  width: 30%;
  
  flex-direction: column;
}

/* Style the buttons inside the tab */
.tablinks button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
  display: flex;
  text-align: left;
}

/* Change background color of buttons on hover */
.tablinks button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tablinks button.active {
  background-color: #fff;
  border-right: 0;
}

/* Style the tab content */
.tabcontent {
  flex-grow: 1;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: 0;
  display: none;
}
.tabcontent.active{
  display:block;  
}
<div id="item100" class="tabwrapper">
    <div class="tablinks">
      <button class="tablinks active" onclick="toggleTabs(event, 'tab-item111', '100')">London</button>
      <button class="tablinks" onclick="toggleTabs(event, 'tab-item112', '100')">Paris</button>
      <button class="tablinks" onclick="toggleTabs(event, 'tab-item113', '100')">Tokyo</button>
    </div>

    <div id="tab-item111" class="tabcontent active">
      <h3>London</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>

    <div id="tab-item112" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>

    <div id="tab-item113" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
 </div>
<br />
<!-- ############################################### -->
<br />
<div id="item200" class="tabwrapper">
    <div class="tablinks">
      <button class="tablinks active" onclick="toggleTabs(event, 'tab-item222', '200')">London</button>
      <button class="tablinks" onclick="toggleTabs(event, 'tab-item223', '200')">Paris</button>
      <button class="tablinks" onclick="toggleTabs(event, 'tab-item224', '200')">Tokyo</button>
    </div>

    <div id="tab-item222" class="tabcontent active">
      <h3>London</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>

    <div id="tab-item223" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>

    <div id="tab-item224" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
 </div>
...