可切换选项卡：默认选项卡

以下是一个使用HTML、CSS和JavaScript创建可切换选项卡的示例解决方法：

HTML代码：

<div class="tab-container">
  <div class="tab">
    <button class="tablinks active" onclick="openTab(event, 'default')">默认选项卡</button>
    <button class="tablinks" onclick="openTab(event, 'tab1')">选项卡1</button>
    <button class="tablinks" onclick="openTab(event, 'tab2')">选项卡2</button>
  </div>
  
  <div id="default" class="tabcontent active">
    <h3>默认选项卡内容</h3>
    <p>这是默认选项卡的内容。</p>
  </div>
  
  <div id="tab1" class="tabcontent">
    <h3>选项卡1内容</h3>
    <p>这是选项卡1的内容。</p>
  </div>
  
  <div id="tab2" class="tabcontent">
    <h3>选项卡2内容</h3>
    <p>这是选项卡2的内容。</p>
  </div>
</div>

CSS代码：

.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 20px;
}

.tabcontent.active {
  display: block;
}

JavaScript代码：

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  
  // 隐藏所有选项卡内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  // 移除所有选项卡按钮的 active 类
  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";
  
  // 添加 active 类到当前选项卡按钮
  evt.currentTarget.className += " active";
}

// 默认显示默认选项卡
document.getElementById("default").style.display = "block";
document.getElementsByClassName("tablinks")[0].className += " active";

这段代码创建了一个具有三个选项卡的容器。通过单击选项卡按钮，可以切换显示不同的选项卡内容。默认情况下，第一个选项卡为默认选项卡，显示其内容。

CSS样式用于定义选项卡按钮和选项卡内容的外观。JavaScript函数openTab用于处理选项卡切换的逻辑。在页面加载时，默认显示默认选项卡的内容。

您可以将上述代码复制到一个HTML文件中，并在浏览器中打开该文件，以查看可切换选项卡的效果。