的方法如下:
HTML代码示例:
<select id="category-select">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
<option value="option4">选项4</option>
</select>
<ul id="category-list">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
JavaScript代码示例:
const selectElement = document.getElementById('category-select');
const listItems = document.getElementById('category-list').getElementsByTagName('li');
selectElement.addEventListener('change', function() {
const selectedCategory = selectElement.value;
// 移除所有列表项的突出显示样式
for (let i = 0; i < listItems.length; i++) {
listItems[i].classList.remove('highlight');
}
// 根据所选类别添加突出显示样式
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].textContent === selectedCategory) {
listItems[i].classList.add('highlight');
}
}
});
CSS代码示例:
.highlight {
background-color: yellow;
font-weight: bold;
}
通过以上步骤,我们成功地将选择下拉列表转换为<ul>列表,并实现了所选类别的突出显示。您可以根据需要自定义样式,并根据具体情况选择适合的腾讯云产品进行应用。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云