垂直选项卡模型制作：HTML、CSS、JavaScript 实现与注释

/* 隐藏所有选项卡内容 */
.tabcontent {
  display: none;
}

/* 选项卡按钮样式 */
.tab button {
  background-color: #f2f2f2;
  border: none;
  color: black;
  padding: 8px 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* 鼠标悬停时的按钮样式 */
.tab button:hover {
  background-color: #ddd;
}

/* 激活状态的按钮样式 */
.tab button.active {
  background-color: #ccc;
}

/* 选项卡内容样式 */
.tabcontent {
  padding: 12px;
  border: 1px solid #ccc;
}

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

注释解释：

• HTML 代码中包含了一个包含所有选项卡的 <div> 元素，每个选项卡都是一个包含一个按钮的 <div> 元素和一个包含选项卡内容的 <div> 元素。为了使按钮和对应的选项卡内容关联起来，按钮的 onclick 属性指定了一个 JavaScript 函数 openTab，该函数接受两个参数：事件对象和选项卡名称。
• CSS 代码中设置了选项卡按钮和选项卡内容的样式，包括按钮的背景颜色、边框、文本颜色、内边距、宽度、文本居左、鼠标指针样式和过渡效果，以及选项卡内容的内边距、边框等。注意 tabcontent 类设置了 display: none，以隐藏所有选项卡内容。
• JavaScript 代码中定义了 openTab 函数，该函数接受事件对象和选项卡名称两个参数。首先通过 getElementsByClassName 方法获取所有选项卡内容和选项卡按钮，然后通过循环隐藏所有选项卡内容和清除所有选项卡按钮的激活状态。最后根据选项卡名称显示对应的选项卡内容并将对应的按钮设置为激活状态。