多次使用垂直标签切换

Question

我需要一个带有垂直选项卡菜单的切换选项卡部分。我从 w3schools 的基本脚本开始：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs 并对其进行了定制和改进。

现在我遇到了问题，我需要在一个站点上多次使用这个切换部分。所以我在具有唯一 ID 的部分周围创建了一个父级 div。

对于现在的脚本，我只需要获取此父项中的元素，因此我尝试用父项而不是 "document" 来调用它们，但这对我不起作用。

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/

Answer 1

wrapper.getElementById(tabID).style.display = "block"; 不起作用。这是因为 .getElementById 不是单个元素的原型。由于 id 是唯一的，因此在元素中查找 id 没有意义，因为我们知道只能有一个元素具有特定的 id。因此我们必须使用适当的 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>

多次使用垂直标签切换

Use vertical tab toggle multiple times

javascript

tabs

toggle