我有一个垂直元素列表。我想从列表中选择元素。此外,所选元素将变为绿色或任何颜色。一次只能从列表中选择一项。我可以创建列表。但是,不知道如何通过单击鼠标使其具有选择性并在选择后改变颜色。我需要为此使用任何 CSS 吗?
<div class="items">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<ul>
</div>
最佳答案
给每个 li
元素一个 tabindex
,并添加这个 CSS:
li:focus {
background: lightgreen;
}
<div class="items">
<ul>
<li tabindex="1">Item1</li>
<li tabindex="1">Item2</li>
<li tabindex="1">Item3</li>
<ul>
</div>
要在纯 JavaScript 中执行此操作:
- 将点击事件监听器添加到
ul
元素。 - 如果事件的目标是
li
元素:
2a.如果已选择一个现有的li
,请删除其类。
2b.将选定的类添加到事件的目标。
document.querySelector('ul').addEventListener('click', function(e) { // 1.
var selected;
if(e.target.tagName === 'LI') { // 2.
selected= document.querySelector('li.selected'); // 2a.
if(selected) selected.className= ''; // "
e.target.className= 'selected'; // 2b.
}
});
.selected {
background: lightgreen;
}
<div class="items">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<ul>
</div>
请注意 LI 在 e.target.tagName === 'LI'
中必须大写。
关于html - 从html中的无序列表中选择元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33246967/