Изменить цвет фона при нажатии - PullRequest
Новая
       7

Изменить цвет фона при нажатии

3 голосов
/ 11 апреля 2019

Я хочу изменить цвет фона при нажатии на якоря 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>

Ответы [ 4 ]

2 голосов
/ 11 апреля 2019

Вы можете использовать jquery для изменения фона li. Вот код: 

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

jsfiddle

1 голос
/ 11 апреля 2019

Итак, пока я не обязательно рекомендую это решение. На самом деле это можно сделать без 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;
}
0 голосов
/ 11 апреля 2019

Вы можете использовать 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;
}
0 голосов
/ 11 апреля 2019

Вот как вы можете сделать это без каких-либо зависимостей. 

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

...