변경 현재 선택된 메뉴 버튼 배경 색상

Question

는 독성이 지역 사회의 분노

Answer 1

순수 JS 솔루션 인해 삭제. jQuery 솔루션이 더 쉬울 것이다. 나는 도움 기능을 추가해야했기 때문에 조금 더러워 보입니다.

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>

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>