Question

我有4个手风琴都使用相同的功能，我需要默认情况下打开每个手风琴上的第一个标签。

我尝试重复默认的打开功能，但是它只在第一手风琴上起作用。

这是两个手风琴的HTML

<div class="service-content w-100" id="service1">
<div class="tab-content-wrapper row">

<div class="tab w-30 ml-100 mp-100">
<div id="tab1-1">
<button class="tablinks" id="defaultOpen" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
</div>
<button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
<button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
</div>

<div id="srv1-sub1" class="tab-content w-70 row">
<h3>Sub-Service 1</h3>
</div>

<div id="srv1-sub2" class="tab-content w-70 row">
<h3>Sub-Service 2</h3>
</div>

<div id="srv1-sub3" class="tab-content w-70 row">
<h3>Sub-Service 3</h3>
</div>

</div><!--tab-content-wrapper-->
</div> <!--service1-->


<div class="service-content w-100" id="service2">
<div class="tab-content-wrapper row">

<div class="tab w-30 ml-100 mp-100">
<div id="tab1-1">
<button class="tablinks" id="defaultOpen2" onclick="openSubSvc(event, 'srv2-sub1')" >Sub-Service 1</button>
</div>
<button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv2-sub2')">Sub-Service 2</button>
<button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv2-sub3')">Sub-Service 3</button>
</div>

<div id="srv2-sub1" class="tab-content w-70 row">
<h3>Sub-Service 1</h3>
</div>

<div id="srv2-sub2" class="tab-content w-70 row">
<h3>Sub-Service 2</h3>
</div>

<div id="srv2-sub3" class="tab-content w-70 row">
<h3>Sub-Service 3</h3>
</div>

</div><!--tab-content-wrapper-->
</div> <!--service1-->

以下是标签的javascript：

function openSubSvc(evt, subSvcName) {
var activeClass = evt.target.classList.contains("active")
if(!activeClass){
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
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(subSvcName).style.display = "block";
evt.currentTarget.className += " active";
} else {
document.getElementById(subSvcName).style.display = "none";
evt.target.classList.remove("active");
}
}

以下是我用来默认打开选项卡的内容：

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

即使具有不同的ID和重复的代码行，第一个手风琴上的第一个选项卡也是默认情况下唯一打开的选项卡。每个手风琴都位于一个隐藏的div中，因此当它打开时，我需要默认情况下打开每个手风琴的第一个标签。我觉得问题在于所有4个手风琴都使用相同的功能吗？感谢您的帮助

Answer 1

问题是您隐藏了所有内容，而不管单击任何按钮时它属于哪个手风琴：

tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
}

一个简单的解决方案是向每个手风琴的所有成员添加一个类，并仅在单击控制按钮之一时隐藏这些元素。一个更细微的解决方案是从要显示的元素开始，然后找到其同级，以便您仅针对受影响的手风琴的元素。这将使javascript更加复杂，但消除了更改标记的必要。

下面展示了一种简单的解决方案，我注意到您已经在传递给单击处理程序的变量的前半部分中有了手风琴组的概念。我在第一个手风琴的成员中添加了svc1，在第二个手风琴的成员中添加了svc2，然后将tabcontent声明替换为：

tabcontent = document.getElementsByClassName(subSvcName.split("-")[0]);

function openSubSvc(evt, subSvcName) {
  var activeClass = evt.target.classList.contains("active")
  if(!activeClass){
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName(subSvcName.split("-")[0]);
    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(subSvcName).style.display = "block";
    evt.currentTarget.className += " active";
  } else {
    document.getElementById(subSvcName).style.display = "none";
    evt.target.classList.remove("active");
  }
}
document.getElementById("defaultOpen").click();
document.getElementById("defaultOpen2").click();

<div class="service-content w-100" id="service1">
<div class="tab-content-wrapper row">

<div class="tab w-30 ml-100 mp-100">
<div id="tab1-1">
<button class="tablinks" id="defaultOpen" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
</div>
<button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
<button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
</div>

<div id="srv1-sub1" class="tab-content w-70 row srv1">
<h3>Sub-Service 1</h3>
</div>

<div id="srv1-sub2" class="tab-content w-70 row srv1">
<h3>Sub-Service 2</h3>
</div>

<div id="srv1-sub3" class="tab-content w-70 row srv1">
<h3>Sub-Service 3</h3>
</div>

</div><!--tab-content-wrapper-->
</div> <!--service1-->


<div class="service-content w-100" id="service2">
<div class="tab-content-wrapper row">

<div class="tab w-30 ml-100 mp-100">
<div id="tab1-1">
<button class="tablinks" id="defaultOpen2" onclick="openSubSvc(event, 'srv2-sub1')" >Sub-Service 1</button>
</div>
<button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv2-sub2')">Sub-Service 2</button>
<button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv2-sub3')">Sub-Service 3</button>
</div>

<div id="srv2-sub1" class="tab-content w-70 row srv2">
<h3>Sub-Service 1</h3>
</div>

<div id="srv2-sub2" class="tab-content w-70 row srv2">
<h3>Sub-Service 2</h3>
</div>

<div id="srv2-sub3" class="tab-content w-70 row srv2">
<h3>Sub-Service 3</h3>
</div>

</div><!--tab-content-wrapper-->
</div> <!--service1-->

多个手风琴均默认打开标签

1 个答案: