CSS實現兩個div切換

CSS可以實現網頁中廣泛運用的動態效果，比如兩個div之間進行切換。在這個過程中，我們需要使用以下三種技術：

1. CSS屬性display的值
2. 偽類:checked的使用
3. CSS3的過渡效果transition

下面是完整的代碼示例：

<style>
.tab {
display: none; //隱藏
}
.tab:checked + .content {
display: block; //顯示
}
.content {
transition: all 0.5s; //過渡效果
}
</style>
<label>
<input type="radio" name="tab" class="tab" id="tab1" checked>Tab 1
<div class="content">
<p>這是第一個div的內容。</p>
</div>
</label>
<label>
<input type="radio" name="tab" class="tab" id="tab2">Tab 2
<div class="content">
<p>這是第二個div的內容。</p>
</div>
</label>

在上面的示例中，我們先利用CSS屬性display的值將兩個div均設為隱藏。然后，我們使用偽類:checked的方式在被選中的情況下將對應的div設為顯示。同時，使用CSS3的過渡效果transition，讓切換更加平滑。最后在HTML代碼中，我們使用標簽將兩個div與對應的input綁定在一起，實現切換效果。