如何从javascript/html中内置的选项卡开始，而不是空白并必须单击一个选项卡

从javascript/html中内置的选项卡开始，而不是空白并必须单击一个选项卡，可以通过以下步骤实现：

使用HTML和CSS创建选项卡布局：在HTML中创建一个包含选项卡标题和内容的容器，使用CSS设置选项卡的样式，包括标题的外观和内容的显示方式。
使用JavaScript添加交互功能：通过JavaScript代码为选项卡标题添加事件监听器，当用户点击某个选项卡标题时，触发相应的事件处理函数。
在事件处理函数中切换选项卡内容：在事件处理函数中，使用JavaScript代码根据用户点击的选项卡标题，切换显示相应的选项卡内容。可以通过修改CSS样式或动态创建/删除HTML元素来实现内容的切换。

以下是一个示例代码，演示如何实现从javascript/html中内置的选项卡开始：

HTML代码：

<div class="tab-container">
  <div class="tab-header">
    <div class="tab" onclick="changeTab(0)">Tab 1</div>
    <div class="tab" onclick="changeTab(1)">Tab 2</div>
    <div class="tab" onclick="changeTab(2)">Tab 3</div>
  </div>
  <div class="tab-content">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
  </div>
</div>

CSS代码：

.tab-container {
  width: 300px;
}

.tab-header {
  display: flex;
}

.tab {
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-content {
  margin-top: 10px;
}

.content {
  display: none;
  padding: 10px;
  background-color: #f9f9f9;
}

JavaScript代码：

// 默认显示第一个选项卡内容
document.getElementsByClassName("content")[0].style.display = "block";

function changeTab(index) {
  // 隐藏所有选项卡内容
  var contents = document.getElementsByClassName("content");
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = "none";
  }
  
  // 显示点击的选项卡内容
  contents[index].style.display = "block";
}

在上述示例中，我们使用了HTML和CSS创建了一个简单的选项卡布局，包含了三个选项卡标题和对应的内容。通过JavaScript代码，为选项卡标题添加了点击事件，并在事件处理函数中切换选项卡内容的显示与隐藏。

这是一个基本的选项卡实现，你可以根据实际需求进行样式和功能的定制。如果你想了解更多关于前端开发、JavaScript和HTML的知识，可以参考腾讯云的前端开发产品和服务，例如腾讯云Web+和腾讯云CDN等。