Question

我有一个垂直的项目列表。我想从列表中选择项目。此外，所选项目将变为绿色或任何颜色。一次只能从列表中选择一个项目。我可以创建列表。但是，不知道如何选择它并在选择后通过单击鼠标来改变颜色。我需要使用任何CSS吗？

＆＃13;

{{1}}

＆＃13;

Answer 1

为每个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'中大写。

Answer 2

HTML

<div class="items">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  <ul>
</div>

和Jquery

$(".items ul li").click(function(){
    $(".items ul li").css("color","inherit");
    $(this).css("color","green");
});

http://jsfiddle.net/74g21org/1/

Answer 3

您可以使用jquery：

$("ul li").on("click", function () {
    $("ul li").removeClass('selected');
    $(this).attr('class', 'selected');

});

.selected {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ul>

Answer 4

要扩展Bak的响应，您需要使用Javascript来应用颜色等样式。

jQuery可能是他建议的最简单的方法。这是一个很好的起点：https://learn.jquery.com/about-jquery/how-jquery-works/

另外，不要忘记关闭列表项标签：

<li>Item1< / li>

Answer 5

你可以使用普通的html和css这样做：

.items li:active {
    color: green;
}

http://jsfiddle.net/b8jwnfgp/1/

从html中的无序列表中选择项目

5 个答案: