由于有毒社区的愤怒更改当前选择的菜单按钮的背景颜色
-5
A
回答
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>
+1
@Vilas这是一个伟大的工作,我的朋友! –
+1
谢谢,非常感谢:) – Ted
0
$('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>
+0
谢谢你的帮助:) – Ted
相关问题
- 1. 更改菜单背景颜色选择
- 2. 当选择单选按钮时,jquery更改div背景颜色?
- 3. 更改按钮的背景颜色与我选择的颜色
- 4. 根据菜单选择更改菜单的背景颜色
- 5. 单选按钮更改背景颜色,当检查
- 6. TreeNode当选择更改前景/背景颜色
- 7. 更改单选按钮的背景颜色(如果未选中)
- 8. 更改Android菜单的背景颜色
- 9. 根据选择更改UITableViewCell中按钮的背景颜色
- 10. C#更改按钮的背景颜色
- 11. 更改按钮的背景颜色
- 12. 更改单选按钮的CIRCLE背景的颜色
- 13. 更改单选按钮中的圆圈背景颜色
- 14. 更改背景颜色的单选按钮
- 15. 更改ListView的背景选择颜色?
- 16. 当按下按钮时更改背景的行颜色
- 17. jQuery的 - 的选择选项更改背景颜色,当点击
- 18. 更改按钮颜色作为背景颜色更改?
- 19. C++ Win32单选按钮背景颜色
- 20. 使用单选按钮更改背景颜色Android
- 21. 使用单选按钮更改背景颜色
- 22. Laravel表::选择更改背景颜色
- 23. 更改背景颜色选择
- 24. 更改背景颜色选择
- 25. 更改UITableViewCell背景颜色时选择
- 26. jQuery根据当前颜色更改div的背景颜色
- 27. 在侧栏中选择特定菜单时更改菜单背景颜色
- 28. 改变菜单的背景颜色
- 29. 更改当前菜单项背景
- 30. 如何更改选项菜单的背景颜色?
那么,有什么问题呢?你的代码在哪里?它有什么问题? – Pointy
请[编辑]你的问题,以显示[你迄今为止尝试过的](http://whathaveyoutried.com)。您应该包括您有,那么我们可以尝试以帮助特定问题的问题代码的[MCVE。你还应该阅读[问]。 –