默认选项卡不适用于JavaScript

Question

我对Web开发有些陌生，我正尝试创建类似于https://www.w3schools.com/howto/howto_js_tabs.asp

的内容

我做到了，但是我遇到的问题是默认打开似乎不起作用。它打开了所有三个选项卡内容，而不是默认的。

我不确定我在做什么错。单击按钮后按钮确实可以使用，但是最初加载时似乎无法正常工作。

这是jsbing的代码： https://jsbin.com/qorofexofi/edit?html,css,js,output

function startTab() {
  document.getElementById("defaultOpen").click();
}

function openCity(evt, cityName) {
  var i, tabfrontpagecontent, tablinks;

  tabfrontpagecontent =
    document.getElementsByClassName("tabfrontpagecontent");
  for (i = 0; i < tabfrontpagecontent.length; i++) {
    tabfrontpagecontent[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";
}

.tabfrontpage {
  left: 30%;
  right: 30%;
  width: 40%;
  top: 3px;
  padding: 3px 5px;
  position: relative;
  overflow: hidden;
  border: 3px solid #ccc;
  background-color: #f1f1f1;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.tabfrontpage ul {
  display: inline-block;
  float: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  position: relative;
  left: 50%;
  text-align: center;
}

.tabfrontpage ul li {
  position: relative;
  overflow: auto;
  right: 50%;
  background-color: inherit;
  text-align: center;
  display: inline;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.7s;
  font-size: 17px;
}

.tabfrontpage li:hover {
  background-color: #ddd;
  transition: 0.7s;
}

.tabfrontpage li.active {
  background-color: #ccc;
}

.tabfrontpagecontent {
  z-index: 10;
  background-color: #FFFFFF;
  position: relative;
  float: left;
  text-align: center;
  left: 15%;
  right: 15%;
  width: 70%;
  display: inline-block;
  padding: 6px 12px;
  border: 3px solid #ccc;
}

<div class="tabfrontpage">
  <ul>
    <li class="tablinks" onclick="openCity(event, 'test11')">Test1</li>
    <li class="tablinks" onclick="openCity(event, 'test22')" id="defaultOpen">Test2</li>
    <li class="tablinks" onclick="openCity(event, 'test33')">Test3</li>
  </ul>
</div>
<div id="test11" class="tabfrontpagecontent">
  </br>
  <h3>Test1Test</h3>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
</div>

<div id="test22" class="tabfrontpagecontent">

  </br>
  <h3>Test2Test</h3>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>

</div>

<div id="test33" class="tabfrontpagecontent">

  </br>
  <h3>Test3Test</h3>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
</div>

我很感激我能得到的任何答复或帮助。

Answer 1

使用jquery，您可以执行以下操作：

$(document).ready(function(){
  $('.toggle').on('click', function() {
    if($(this).next('.content').hasClass('active')){
      $(this).text('Show');
      $(this).next('.content').removeClass('active');
    }else{
      $('.toggle').text('Show');
      $(this).text('Hide');
      $('.content').removeClass('active');
      $(this).next('.content').addClass('active');
    }
  });
});

.content{
  display:none;
}

.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='#container'>
  <span class='item'>1</span>
  <button type="button" class="toggle">Show</button>
  <div class="content">Some 1</div>
  <hr>
  <span class='item'>2</span>
  <button type="button" class="toggle">Hide</button>
  <div class="content active">Some 2</div>
  <hr>
  <span class='item'>3</span>
  <button type="button" class="toggle">Show</button>
  <div class="content">Some 3</div>
</div>

Answer 2

您应该将ID defaultOpen放在默认情况下要打开的标签上 否则document.getElementById将无法找到

<li id="defaultOpen" class="tablinks" onclick="openCity(event, 'test11')">Test1</li>

，您还应该在JavaScript中调用您创建的startTab()

函数

除此之外，您的代码还在运行，这是您的示例更新后的https://jsbin.com/sipikefove/1/edit?html,js,output

Answer 3

您需要在不想看到的元素上将CSS display属性设置为none-

function startTab() {
  document.getElementById("defaultOpen").click();
}

function openCity(evt, cityName) {
  var i, tabfrontpagecontent, tablinks;

  tabfrontpagecontent =
    document.getElementsByClassName("tabfrontpagecontent");
  for (i = 0; i < tabfrontpagecontent.length; i++) {
    tabfrontpagecontent[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";
}

.tabfrontpage {
  left: 30%;
  right: 30%;
  width: 40%;
  top: 3px;
  padding: 3px 5px;
  position: relative;
  overflow: hidden;
  border: 3px solid #ccc;
  background-color: #f1f1f1;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.tabfrontpage ul {
  display: inline-block;
  float: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  position: relative;
  left: 50%;
  text-align: center;
}

.tabfrontpage ul li {
  position: relative;
  overflow: auto;
  right: 50%;
  background-color: inherit;
  text-align: center;
  display: inline;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.7s;
  font-size: 17px;
}

.tabfrontpage li:hover {
  background-color: #ddd;
  transition: 0.7s;
}

.tabfrontpage li.active {
  background-color: #ccc;
}

.tabfrontpagecontent {
  z-index: 10;
  background-color: #FFFFFF;
  position: relative;
  float: left;
  text-align: center;
  left: 15%;
  right: 15%;
  width: 70%;
  display: inline-block;
  padding: 6px 12px;
  border: 3px solid #ccc;
}

<div class="tabfrontpage">
  <ul>
    <li class="tablinks" onclick="openCity(event, 'test11')">Test1</li>
    <li class="tablinks" onclick="openCity(event, 'test22')">Test2</li>
    <li class="tablinks" onclick="openCity(event, 'test33')">Test3</li>
  </ul>
</div>
<div id="test11" class="tabfrontpagecontent" style="display:none">
  </br>
  <h3>Test1Test</h3>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
</div>

<div id="test22" class="tabfrontpagecontent">

  </br>
  <h3>Test2Test</h3>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>

</div>

<div id="test33" class="tabfrontpagecontent" style="display:none">

  </br>
  <h3>Test3Test</h3>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
</div>