更改当前选定的菜单按钮背景颜色

Question

因有毒社区愤怒而被删除

Answer 1

纯JS解决方案。 jQuery解决方案会更容易。我不得不添加一个帮助功能，这就是为什么它看起来有点混乱。

＆＃13;

＆＃13;

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" );
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

$('li').on('click', function(){
$('li').removeClass('active');
$(this).addClass('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 {
  background: #6dab3c;
}

.active {
background: #6dab3c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul id="navigation">
  <li><a id="link-economic-calendar" href="#economic-calendar">Календарь</a></li>
  <li><a id="link-tv" href="#my-goals">ТВ и радио</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>