HTML中常常使用選項卡來展示不同的內容，通過點擊不同的選項卡可以實現內容的切換和展示。下面是一段利用HTML和CSS實現選項卡切換的代碼。 首先，在HTML中需要創建選項卡的代碼結構。我們使用ul標簽創建菜單選項，再用li標簽創建每個菜單選項。每個菜單選項對應一個div容器，用于放置對應的內容。代碼如下：

<ul class="menu">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="content">
<div class="active">選項卡1的內容</div>
<div>選項卡2的內容</div>
<div>選項卡3的內容</div>
</div>

為了使選項卡能夠切換，我們需要給每個菜單選項和其對應的內容div設置唯一的id，并且相互對應。代碼如下：

<ul class="menu">
<li class="active" id="tab1">選項卡1</li>
<li id="tab2">選項卡2</li>
<li id="tab3">選項卡3</li>
</ul>
<div class="content">
<div class="active" id="tab1-content">選項卡1的內容</div>
<div id="tab2-content">選項卡2的內容</div>
<div id="tab3-content">選項卡3的內容</div>
</div>

接下來，在CSS中設置菜單選項和內容div的樣式，使其能夠實現選項卡切換的效果。代碼如下：

.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
margin: 0;
padding: 10px;
cursor: pointer;
}
.menu li.active {
background-color: #ddd;
}
.content div {
display: none;
padding: 20px;
}
.content .active {
display: block;
}

最后，在JavaScript中實現選項卡切換的功能。我們需要為每個菜單選項綁定點擊事件，并且根據點擊的菜單選項id獲取對應的內容div，并在內容div中添加.active類，同時隱藏其他內容div中的.active類。代碼如下：

var menus = document.querySelectorAll(".menu li");
for (var i = 0; i< menus.length; i++) {
menus[i].onclick = function() {
var id = this.getAttribute("id");
var content = document.getElementById(id + "-content");
for (var j = 0; j< menus.length; j++) {
menus[j].classList.remove("active");
}
for (var k = 0; k< contents.length; k++) {
contents[k].classList.remove("active");
}
this.classList.add("active");
content.classList.add("active");
}
}
var contents = document.querySelectorAll(".content div");

以上就是實現選項卡切換的HTML、CSS、JavaScript代碼。通過這段代碼，我們可以在頁面中快速實現選項卡的功能。