[Solved] Change currently selected menu button background color [closed]

by


Pure JS solution. jQuery solution would be easier. I had to add a helping function, that’s why it looks a little bit messy.

var elems = document.getElementsByTagName('li');

function clear() {
  Array.from(elems).forEach(v => v.classList.remove("active"));
}
Array.from(elems).forEach(function(v) {
  v.addEventListener('click', function(event) {
    event.preventDefault();
    clear();
    this.classList.add( "active" );
  });
});
#navigation {
  margin-top: 20px;
  width: auto;
  display: block;
  list-style: none;
  z-index: 3;
}

#navigation a {
  color: #1c1c1c;
  display: block;
  background: rgba(255, 255, 255, 0.6);
  line-height: 50px;
  padding: 0px 7px;
  text-transform: uppercase;
  margin-bottom: 6px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

#navigation a:hover, #navigation li.active a {
  background: #6dab3c;
}
<ul id="navigation">
  <li><a id="link-economic-calendar" href="#economic-calendar">Календарь</a></li>
  <li><a id="link-tv" href="">ТВ и радио</a></li>
  <li><a id="link-my-goals" href="#my-goals">Мои цели</a></li>
  <li><a id="link-my-strateegy" href="#my-strateegy">Моя стратегия</a></li>
  <li><a id="link-checklist" href="#checklist">Чек-лист</a></li>
  <li><a id="link-vault" href="#vault">Хранилище</a></li>
  <li><a id="link-faq" href="#faq">FAQ</a></li>
  <li><a id="link-support" href="#support">Техподдержка</a></li>
  <li><a id="link-trading-journal" href="#trading-journal">Журнал сделок</a></li>
</ul>

2

solved Change currently selected menu button background color [closed]