javascript - 是什么阻止了此 JS 脚本末尾的单击事件？

Question

由于“defaultOpen”id，我只是看不到阻止 Intro 选项卡被设置为加载时的事件选项卡的错误。它在被点击之前不会改变颜色，它应该看起来像那样而无需点击它。这是 W3Schools HowTo lesson on Tabs 的简单副本，但有些地方不对。

function openContent(evt, contentType) {
  var i, tabcontent, tabheads;
  tabcontent =
    document.getElementsByClassName('tabcontent');
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = 'none';
  }
  tabheads =
    document.getElementsByClassName('tabheads');
  for (i = 0; i < tabheads.length; i++) {
    tabheads[i].className =
      tabheads[i].className.replace(' active', '')
  }
  document.getElementById(contentType).style.display = 'block';
  evt.currentTarget.className += ' active';
}

document.getElementById('defaultOpen').click();

.outerDiv {
  background-color: rgba(50, 50, 0, 0.7);
}
.innerDiv {
  background-color: rgba(10, 10, 10, 0.7);
  color: white;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 25px;
}
.innerDiv p {
  padding: 0 1.2rem;
  margin: 0;
  align-self: center;
}
ul.tabs {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 1rem 0 0.3rem 0;
  font-weight: 400;
}
.tabs li a {
  padding: 0 1.2rem 0.5rem 1.2rem;
  background-color: rgba(0, 0, 0, 0.4);
  color: #96912d;
  margin: 0.3rem 0.3rem 0.5rem 0.3rem;
}
.tabs li a:hover {
  background-color: black;
  color: yellow;
}
.tabs li a:focus,
.tabs li a .active {
  background-color: rgba(10, 10, 10, 0.7);
  color: #fac819;
}
.under-tabs {
  margin-top: 0;
}
.tabcontent {
  display: none;
}

<section>
  <div class="outerDiv">
    <ul class="tabs">
      <li><a href="javascript:void(0)" class="tabheads" onclick="openContent(event,'intro')" id="defaultOpen">Intro</a>
      </li>
      <li><a href="javascript:void(0)" class="tabheads" onclick="openContent(event,'blog')">Blog</a>
      </li>
      <li><a href="javascript:void(0)" class="tabheads" onclick="openContent(event,'comments')">Comments</a>
      </li>
    </ul>
    <div class="innerDiv under-tabs tabcontent" id="intro">
      <p>
        This project is building a series of virtual colonies on the Moon.
      </p>
    </div>
    <div class="tabcontent" id="blog">
      <iframe src="blogMain.html"></iframe>
    </div>
    <div class="tabcontent" id="comments">
      Comment section!!!
    </div>
  </div>
</section>

Answer 1

样式有误

.tabs li a:focus, .tabs li a.active {
   background-color: rgba(10, 10, 10, 0.7);
   color: #fac819; 
}

在 css 中，a 标签和 .active 类之间有空格，因为该类附加到 a 元素