javascript 单击后更改链接的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16383171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the background color of a link after being clicked
提问by Ray Hector
I'd like to ask how to change the background color of each link (the rectangular shape surrounding it) to one different color after a link is clicked, and the other links still remain in its original background color.
我想问一下如何在点击链接后将每个链接（围绕它的矩形形状）的背景颜色更改为一种不同的颜色，而其他链接仍保留其原始背景颜色。
Each link corresponds to one div placed in the same html file (that I didn't include here).
每个链接对应于放置在同一个 html 文件中的一个 div（我没有在此处包含）。
The point is to let the viewers know which link they are at. By the way, if it is okay I'm looking for the fastest code possible ^_^(pure css, javascriptor jQuery). Appreciate all suggestions!
关键是让观众知道他们在哪个链接。顺便说一句，如果可以的话，我正在寻找最快的代码^_^（纯css、javascript或jQuery）。欣赏所有建议！
the highlight only applied to the current link only! (the others will have the normal colors)
突出显示仅适用于当前链接！（其他将有正常的颜色）
<div id="Navigation">
<div id="nav_link">
<ul id="MenuBar" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="javascript:showonlyone('Index_frame');" >Home</a>
<ul>
<li><a href="javascript:showonlyone('Specification_frame');" >Specification</a></li>
<li><a href="javascript:showonlyone('Images_frame');" >Images</a></li>
<li><a href="javascript:showonlyone('Video_frame');">Video</a></li>
<li><a href="javascript:showonlyone('Contact_frame');">Contact</a></li>
</ul>
</li>
<li><a href="javascript:showonlyone('Specification_frame');" >Specification</a></li>
<li><a href="javascript:showonlyone('Images_frame');" >Images</a></li>
<li><a href="javascript:showonlyone('Video_frame');">Video</a></li>
<li><a href="javascript:showonlyone('Contact_frame');">Contact</a></li>
</ul>
</div>
<!--End of nav_link-->
</div>
<!-- End of Navigation-->
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(1000).fadeIn(500);
}
else {
$(this).hide(1500).fadeOut(500);
}
});
}
EDITED
已编辑
Guys, there is this one thing that I'm still stuck at even though I spent time on it a lot, I added some more JavaScript links the same with the above in the page with the idea that these new links will be functional just like the former. That is being clicked on ==> the highlight will appear only on these Navigation links. I tried to modify the function from jjurmlike this
伙计们，尽管我花了很多时间，但我仍然坚持这一件事，我在页面中添加了更多与上述相同的 JavaScript 链接，并认为这些新链接的功能就像前者。单击 ==> 突出显示将仅出现在这些导航链接上。我试图像这样从jjurm修改函数
$(function(){
$("#MenuBar a,#colOne a").bind("click", function(){
var names=$(this).attr('name');
$("#MenuBar a").removeClass("clicked");
$("#MenuBar a[name='names']").addClass("clicked");
});
});
It didn't work and neither did the old ones that used to work
它没有用，以前能用的旧的也没有用
采纳答案by jjurm
You can do this by simple css code:
您可以通过简单的 css 代码来做到这一点：
#MenuBar a:visited {
background: yellow;
}
Edit:
编辑：
As far as this doesn't work with javascript links (but I haven't tried it), there is other solution with jQuery and CSS.
至于这不适用于 javascript 链接（但我还没有尝试过），还有其他使用 jQuery 和 CSS 的解决方案。
jQuery code:
jQuery代码：
$(function(){
$("#MenuBar a").bind("click", function(){
$(this).addClass("clicked");
});
});
CSS:
CSS：
#MenuBar a.clicked {
background: yellow;
}
Edit2:
编辑2：
Ok, if you want to keep highlighted only last clicked element, it's enough to add this simple line to javascript code:
好的，如果您只想突出显示最后一次点击的元素，只需将以下简单的行添加到 javascript 代码中即可：
$(function(){
$("#MenuBar a").bind("click", function(){
$("#MenuBar a").removeClass("clicked"); // Remove all highlights
$(this).addClass("clicked"); // Add the class only for actually clicked element
});
});
Edit3:
编辑3：
If you want to have more links that point to same location and to highlight all of them if one is clicked, follow this:
如果您想拥有更多指向同一位置的链接并在单击时突出显示所有链接，请按照以下步骤操作：
$(function(){
// Assume that your 'a' elements are in #MenuBar and #colOne
$("#MenuBar a, #colOne a").bind("click", function(){
// Remove all highlights
$("#MenuBar a, #colOne a").removeClass("clicked");
// Store the name attribute
var name = $(this).attr("name");
// Find all elements with given name and highlight them
$("#MenuBar a[name='"+name+"'], #colOne a[name='"+name+"']").addClass("clicked");
});
});
回答by naivists
In a similar question to yoursI once found out that only changes in text color are allowedsome properties can be changed if you use a:visitedpseudo-class (UPD: and background-color is one of them). But since your links are javascript links, the :visitedselector will not work, hence you cannot do it as a pure CSS solution. You will have to use some kind of javascript. If jQuery is ok, you can try this:
在与您类似的问题中，我曾经发现只允许更改文本颜色，如果您使用a:visited伪类（UPD：和背景颜色是其中之一），则可以更改某些属性。但是由于您的链接是 javascript 链接，:visited选择器将不起作用，因此您不能将其作为纯 CSS 解决方案来执行。您将不得不使用某种 javascript。如果 jQuery 没问题，你可以试试这个：
$('a').on('click', function(){$(this).css("background-color","yellow");});
Perhaps you can change the "showonlyone" function? Then you could add the background changing code to it.
也许您可以更改“showonlyone”功能？然后您可以向其中添加背景更改代码。
回答by russinkungen
$('#MenuBar').on('click', 'a', function() {
$(this).css('background-color', '#bada55');
});
or if you need unique colors you can use the data-attribute.
或者如果您需要独特的颜色，您可以使用 data-attribute。
<a href="#" data-color="#bada55"></a>
$('#MenuBar').on('click', 'a', function() {
var $elem = $(this);
$elem.css('background-color', $elem.data('color'));
});
I'd recommended adding classes instead and using css to define styles.
我建议改为添加类并使用 css 来定义样式。
$('#MenuBar').on('click', 'a', function() {
$(this).addClass('clicked-menu-link');
});
edit:To remove the other clicks use:
编辑：要删除其他点击使用：
$('#MenuBar').on('click', 'a', function() {
var fancyClass = 'clicked-menu-link';
$('#MenuBar a').removeClass(fancyClass).filter(this).addClass(fancyClass);
});
回答by dfsq
You can add an activeclass to the clicked anchor. Using live NodeListshould work really fast as you also need to unselect previously selected item:
您可以active向单击的锚点添加类。使用 liveNodeList应该工作得非常快，因为您还需要取消选择以前选择的项目：
var a = document.getElementById('Navigation').getElementsByClassName('active');
$('#Navigation').on('click', 'a', function() {
if (a[0]) a[0].className = '';
this.className = 'active';
});
Note: getElementsByClassNameis IE9+ if you need to support older versions use jQuery:
注意：getElementsByClassName是 IE9+ 如果您需要支持旧版本使用 jQuery：
var $a = $('#Navigation a');
$('#Navigation').on('click', 'a', function() {
$a.removeClass('active');
$(this).addClass('active');
});
