在網頁設計中，選項卡是常見的一種導航方式。使用div+css可以輕松實現選項卡效果，不需要使用任何JavaScript代碼。

<div class="tab">
<ul class="tab-title">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<div class="content-item active">這是選項卡1的內容</div>
<div class="content-item">這是選項卡2的內容</div>
<div class="content-item">這是選項卡3的內容</div>
</div>
</div>

以上是選項卡的HTML結構。先創建一個div元素，并添加一個class為tab，表示選項卡的整體。在div里面添加一個ul元素，class為tab-title，表示選項卡的導航。ul里面再添加li元素，每個li表示一個選項卡，class為active的選項卡默認為激活狀態。

在ul下面，再添加一個div元素，class為tab-content，表示選項卡的內容區域。在div里面添加div元素，class為content-item，表示每個選項卡的內容。class為active的內容區域默認顯示。

.tab {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.tab .tab-title {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.tab .tab-title li {
flex: 1;
text-align: center;
padding: 10px;
background-color: #f5f5f5;
border-right: 1px solid #ddd;
cursor: pointer;
}
.tab .tab-title .active {
background-color: #fff;
font-weight: bold;
}
.tab .tab-content .content-item {
display: none;
padding: 10px;
}
.tab .tab-content .active {
display: block;
}

以上是選項卡的樣式代碼。通過設置選項卡和內容區域的樣式，實現選項卡的效果。其中，使用了Flex布局，使得選項卡能夠自適應寬度。默認情況下，選項卡的背景顏色為灰色，激活狀態的選項卡背景顏色為白色且加粗。內容區域的樣式中，使用display屬性控制內容的隱藏和顯示。

最后，將HTML代碼和CSS代碼整合在一起，即可實現選項卡效果。

https://codepen.io/muyun002/pen/dygdJGV

以上是完整的選項卡代碼。通過簡單的div+css實現了選項卡效果，不需要使用復雜的JavaScript代碼。在實際開發中，使用div+css實現選項卡效果是一種優秀的選擇。