<div role="listbox">是HTML語言中的一個(gè)屬性，用于定義一個(gè)列表框的角色。列表框是一種可以選擇一個(gè)或多個(gè)選項(xiàng)的用戶界面組件，常用于表單中。使用<div role="listbox">可以為列表框指定一個(gè)語義化的角色，以便屏幕閱讀器和其他輔助技術(shù)可以更好地理解和處理這個(gè)元素。
下面我們來看幾個(gè)代碼案例，詳細(xì)解釋<div role="listbox">的用法和效果。
案例一：

使用<div role="listbox">創(chuàng)建一個(gè)簡單的列表框：

<div role="listbox">
<div role="option">選項(xiàng)1</div>
<div role="option">選項(xiàng)2</div>
<div role="option">選項(xiàng)3</div>
</div>

在這個(gè)案例中，我們創(chuàng)建了一個(gè)簡單的列表框，包含三個(gè)選項(xiàng)。每個(gè)選項(xiàng)使用<div role="option">來定義，這樣屏幕閱讀器和其他輔助技術(shù)可以正確地識別它們。
案例二：

為列表框添加一些交互功能：

<div role="listbox" aria-labelledby="listbox-label" tabindex="0">
<div id="listbox-label">選擇一個(gè)選項(xiàng)：</div>
<div role="option" aria-selected="true">選項(xiàng)1</div>
<div role="option">選項(xiàng)2</div>
<div role="option">選項(xiàng)3</div>
</div>

在這個(gè)案例中，我們?yōu)榱斜砜蛱砑恿艘恍╊~外的屬性和樣式。通過使用屬性aria-labelledby，我們可以將一個(gè)標(biāo)簽與列表框關(guān)聯(lián)起來，以提供更好的可訪問性。同時(shí)，我們還為列表框添加了一個(gè)tabindex屬性，使其可以被鍵盤聚焦并進(jìn)行交互操作。
案例三：

使用JavaScript和CSS為列表框添加動(dòng)態(tài)效果：

<style>
.active {
background-color: lightblue;
}
</style>
<br>
<script>
function selectOption(option) {
var options = document.querySelectorAll('[role="option"]');
options.forEach(function (item) {
item.classList.remove('active');
});
option.classList.add('active');
}
</script>
<br>
<div role="listbox">
<div role="option" onclick="selectOption(this)">選項(xiàng)1</div>
<div role="option" onclick="selectOption(this)">選項(xiàng)2</div>
<div role="option" onclick="selectOption(this)">選項(xiàng)3</div>
</div>

在這個(gè)案例中，我們使用了JavaScript和CSS來為列表框添加動(dòng)態(tài)效果。當(dāng)用戶點(diǎn)擊一個(gè)選項(xiàng)時(shí)，通過調(diào)用selectOption函數(shù)，我們可以為被選中的選項(xiàng)添加一個(gè)active類，從而改變其背景顏色。
通過以上的案例代碼，我們可以清楚地了解和使用<div role="listbox">。它提供了一個(gè)語義化的角色，使得屏幕閱讀器和其他輔助技術(shù)可以更好地理解和處理列表框。同時(shí)，我們可以通過添加額外的屬性和樣式，為列表框增加更豐富的交互和動(dòng)態(tài)效果。