howto 在线编辑器 | howto代码测试

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>body {font-family: Arial;}

/* 标签样式 */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* 为选项卡内的按钮设置样式 */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* 悬停时改变按钮的背景颜色 */
.tab button:hover {
  background-color: #ddd;
}

/* 创建一个活动的/当前的标签链接类 */
.tab button.active {
  background-color: #ccc;
}

/* 标签内容的样式 */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<p>在此示例中，我们使用 JavaScript 来“单击”伦敦按钮，以在页面加载时打开选项卡。</p>

<div id="London" class="tabcontent">
  <h3>伦敦</h3>
  <p>伦敦是英格兰的首都。</p>
</div>

<div id="巴黎" class="tabcontent">
  <h3>巴黎</h3>
  <p>巴黎是法国的首都。</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>东京</h3>
  <p>东京是日本的首都。</p>
</div>

// 获取 id="defaultOpen" 的元素并点击它
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html>

报个问题: