<div>是HTML中一種常用的標簽，用于創建一個容器，用于組織和排列其他HTML元素。在使用<div>標簽創建的容器中，我們經常需要實現一些特殊效果，比如單選效果。單選效果即在多個選項中只能選擇一個選項，其他選項會自動取消選擇。在本文中，我們將通過幾個代碼案例來詳細解釋<div>單選效果的實現方法。
，我們可以使用HTML的<input>標簽結合CSS來實現<div>單選效果。具體的代碼如下所示：

<div id="container">
<input type="radio" name="option" value="option1">選項1
<input type="radio" name="option" value="option2">選項2
<input type="radio" name="option" value="option3">選項3
</div>

在上述代碼中，我們使用了<input>標簽創建了三個單選框，并使用相同的name屬性將它們綁定在一起。這樣，用戶只能在這三個選項中選擇一個。注意，我們還為每個<input>標簽添加了value屬性，用于在提交表單時區分用戶選擇的是哪個選項。
然后，我們可以使用JavaScript來進一步優化<div>單選效果。通過添加一段JavaScript代碼，我們可以實現在用戶選擇一個選項時，取消其他選項的選擇。具體的代碼如下所示：

<script>
var options = document.getElementsByName("option");
for(var i = 0; i < options.length; i++) {
options[i].addEventListener("click", function() {
for(var j = 0; j < options.length; j++) {
if(options[j] != this) {
options[j].checked = false;
}
}
});
}
</script>

在上述代碼中，我們通過調用document.getElementsByName()方法獲取到所有的<input>標簽，然后使用addEventListener()方法為每個<input>標簽添加一個"click"事件監聽器。當用戶點擊一個選項時，事件監聽器會觸發一個循環，將其他選項的選擇狀態設置為false。這樣，用戶只能選擇一個選項，其他選項會自動取消選擇。
<div>單選效果的實現方法不僅限于上述的HTML和JavaScript的組合。我們還可以使用CSS來實現<div>單選效果。具體的代碼如下所示：

<style>
.option-container input[type="radio"] {
display: none;
}
.option-container input[type="radio"]:checked + label {
background-color: lightblue;
}
</style>
<br>
<div class="option-container">
<input type="radio" name="option" id="option1">
<label for="option1">選項1</label>
<input type="radio" name="option" id="option2">
<label for="option2">選項2</label>
<input type="radio" name="option" id="option3">
<label for="option3">選項3</label>
</div>

在上述代碼中，我們使用了CSS的偽類選擇器:checked，以及+選擇器。通過設置display: none;來隱藏<input>標簽，然后使用:checked偽類選擇器和+選擇器來定義選中選項后的樣式變化。這樣，用戶點擊選項時，選項的背景顏色會變成淺藍色，并且其他選項會自動取消選擇。
綜上所述，我們可以通過HTML、JavaScript和CSS的組合，實現<div>單選效果。這些方法可以根據實際需求的復雜程度選擇使用。無論是簡單的<input>標簽結合CSS，還是使用JavaScript進一步優化，都可以幫助我們實現一個漂亮且實用的<div>單選效果。希望本文對你有所幫助！</div>