单击时更改 li 背景颜色

Posted 2023-03-05

【中文标题】单击时更改 li 背景颜色

【英文标题】：Change li background color when clicked

【发布时间】：2019-09-01 11:59:28

【问题描述】：

我想在点击 li 锚点时更改背景颜色：

<div class="text-center row">
  <ul  class="col-md-12 secondNav">
    <li class="navbar-brand nav-item" style="margin-right: 9%">
      <a href="#" ><strong>INICIO</strong> </a>
    </li>
    <li  class="navbar-brand nav-item" >
      <a href="#"><strong>COMPARAR</strong></a>
    </li>
  </ul>
</div>

【问题讨论】：

Change background on li element on click的可能重复

【参考方案1】：

您可以使用 jquery 更改li 背景。代码如下：

$(document).ready(function()
  $('.nav-item').click(function(e)
  $(e.target).css('backgroundColor', 'red');
   );
);

jsfiddle

【参考方案2】：

以下是您可以在没有任何依赖项的情况下执行此操作的方法。

const listItems = document.querySelectorAll('.navbar-brand');

listItems.forEach(li => 
  li.addEventListener('click', () => 
    li.classList.toggle('alt-background');
  );
);

.alt-background 
  background-color: lightgray;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="text-center row">
  <ul  class="col-md-12 secondNav">
    <li class="navbar-brand nav-item" style="margin-right: 9%">
      <a href="#" ><strong>INICIO</strong> </a>
    </li>
    <li  class="navbar-brand nav-item" >
      <a href="#"><strong>COMPARAR</strong></a>
    </li>
  </ul>
</div>

jsFiddle

【参考方案3】：

所以，虽然我不一定推荐这种解决方案。实际上可以在没有 javascript 的情况下做到这一点！看看这个例子：https://jsfiddle.net/age5zdkb/2/

<div class="text-center row">
  <ul  class="col-md-12 secondNav">
    <a href="#" >
      <li class="navbar-brand nav-item" style="margin-right: 9%">
        <input type="checkbox" id="demo"/>
        <label for="demo"><strong>INICIO</strong></label>
      </li>
    </a>
    <a href="#" >
      <li  class="navbar-brand nav-item" >
        <input type="checkbox" id="demo1"/>
        <label for="demo1"><strong>COMPARAR</strong></label>
      </li>
    </a>
  </ul>
</div>

label 
    display: block;


input[type="checkbox"] 
  display:none;


#demo:checked + label, #demo1:checked + label 
    background: pink;
    color: white;

【参考方案4】：

您可以使用 jquery 在 css 中单击导航项时添加活动类，为活动项添加背景色

https://jsfiddle.net/binoy/g6e1bykx/3/

In JS

   $(document).ready(function()
            $('.nav-item').click(function(e)
                $('.secondNav .nav-item').removeClass('active');
                $(this).addClass('active');
             );
    );



In  CSS
.secondNav .nav-item.active 
  background-color: red;