如何创建这样的选项卡栏？有样品吗？

选项卡栏是一种常见的网页设计元素，用于在页面上展示多个相关内容，并允许用户通过点击不同的选项卡来切换内容。下面是一种常见的创建选项卡栏的方法：

HTML结构：使用HTML标签创建选项卡栏的基本结构。通常使用<ul>标签作为选项卡的容器，<li>标签作为每个选项卡的项，<div>标签作为每个选项卡对应的内容容器。

<ul class="tab-bar">
  <li class="tab">选项卡1</li>
  <li class="tab">选项卡2</li>
  <li class="tab">选项卡3</li>
</ul>

<div class="tab-content">
  <div class="content">选项卡1的内容</div>
  <div class="content">选项卡2的内容</div>
  <div class="content">选项卡3的内容</div>
</div>

CSS样式：使用CSS样式来美化选项卡栏的外观，并设置默认显示的选项卡和内容。

.tab-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f2f2f2;
  cursor: pointer;
}

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

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

.tab-content {
  display: none;
}

.content {
  padding: 20px;
  border: 1px solid #ccc;
}

JavaScript交互：使用JavaScript来实现选项卡的切换效果。通过监听选项卡的点击事件，切换选项卡的样式和显示对应的内容。

var tabs = document.getElementsByClassName("tab");
var contents = document.getElementsByClassName("content");

for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function() {
    // 移除所有选项卡的active类
    for (var j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove("active");
    }
    // 隐藏所有内容
    for (var k = 0; k < contents.length; k++) {
      contents[k].style.display = "none";
    }
    // 添加当前选项卡的active类
    this.classList.add("active");
    // 显示对应的内容
    var index = Array.prototype.indexOf.call(tabs, this);
    contents[index].style.display = "block";
  });
}

// 默认显示第一个选项卡和对应的内容
tabs[0].click();

这样就创建了一个简单的选项卡栏。你可以根据需要自定义样式和内容。

以下是一个简单的样品，你可以在浏览器中运行查看效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS样式 */
  </style>
</head>
<body>
  <!-- HTML结构 -->
  <script>
    // JavaScript交互
  </script>
</body>
</html>

希望这个答案能够满足你的需求。如果你需要更多帮助或有其他问题，请随时提问。