打开页面时将切换选项卡设置为活动状态

Question

我制作了 3 个切换选项卡，单击按钮时将打开这些选项卡。 但我想将这些选项卡中的一个设置为活动状态，以便在加载页面时默认打开它，然后通过单击每个按钮显示其他内容。 抱歉英语不好😅它是这样的：

html：

    <button href="#Teachers" class="tablinks" onclick="openContent(event, 'Teachers')" > برای مدرسین</button>
    <button href="#Users" class="tablinks" onclick="openContent(event, 'Users')">برای کاربران</button>
    <button href="#Institutes" class="tablinks" onclick="openContent(event, 'Institutes')">برای آموزشگاه ها</button>

和 js ：

function openContent(evt, userName) {
  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(userName).style.display = "block";
  evt.currentTarget.className += " active";
}

打开页面是这样的：

当您单击每个按钮时，就像这样，我希望在打开页面时第一个按钮处于活动状态：

Answer 1

实现上述目标的一种方法是在您的页面上调用openContent()函数，然后根据此显示您的内容检查evt.currentTarget是否未定义。

演示代码：

 openContent("","Teachers");//call function function openContent(evt, userName) { 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(userName).style.display = "block"; //check if target is undefined if (evt.currentTarget != undefined) { evt.currentTarget.className += " active"; } else { //add activeclass to first button document.getElementsByClassName("tablinks")[0].className += " active"; } }

 .tabcontent { display: none; } .active { background: red; }

 <button href="#Teachers" class="tablinks" onclick="openContent(event, 'Teachers')"> برای مدرسین</button> <button href="#Users" class="tablinks" onclick="openContent(event, 'Users')">برای کاربران</button> <button href="#Institutes" class="tablinks" onclick="openContent(event, 'Institutes')">برای آموزشگاه ها</button> <div id="Teachers" class="tabcontent">Something</div> <div id="Users" class="tabcontent">Something1</div> <div id="Institutes" class="tabcontent">Something2</div>