点击后更改链接的背景颜色 [英] Changing the background color of a link after being clicked
问题描述
我想问一下，在点击链接后，如何将每个链接的背景颜色（包围它的矩形形状）更改为一种不同的颜色，其他链接仍保持其原始背景颜色。
每个链接对应于放置在同一个html文件中的一个div（我没有在这里包含）。
关键是让观众知道他们在哪个链接。顺便说一句，如果没关系，我正在寻找最快的代码^ _ ^ （纯粹的 css ， javascript 或 jQuery的）。欣赏所有建议！
突出显示仅适用于当前链接！ （其他人将具有正常的颜色）
< div id =Navigation>
< div id =nav_link>
< ul id =MenuBarclass =MenuBarHorizontal>
< li>< a class =MenuBarItemSubmenuhref =javascript：showonlyone（'Index_frame'）; >家庭和LT; / A>
< ul>
< li>< a href =javascript：showonlyone（'Specification_frame'）; >规格及LT; / A>< /锂>
< li>< a href =javascript：showonlyone（'Images_frame'）; >图像和LT; / A>< /锂>
< li>< a href =javascript：showonlyone（'Video_frame'）;>视频< / a>< / li>
< li>< a href =javascript：showonlyone（'Contact_frame'）;>联系人< / a>< / li>
< / ul>
< / li>
< li>< a href =javascript：showonlyone（'Specification_frame'）; >规格及LT; / A>< /锂>
< li>< a href =javascript：showonlyone（'Images_frame'）; >图像和LT; / A>< /锂>
< li>< a href =javascript：showonlyone（'Video_frame'）;>视频< / a>< / li>
< li>< a href =javascript：showonlyone（'Contact_frame'）;>联系人< / a>< / li>
< / ul>
< / div>
<！ - - nav_link结束 - >
< / div>
<！ - 导航结束 - >
函数showonlyone（thechosenone）{
$（'。newboxes'）。each（function（index）{
if（$（this）.attr（id）== theChosenone）{
$（this）.show（1000）.fadeIn（500）;
}
else {
$（this）.hide（1500）.fadeOut（500）;
}
}）;
EDITED
伙计们，我仍然坚持这一点，即使我花了很多时间，在页面中添加了一些与上述相同的JavaScript链接，并且这些新链接的功能与前者相似。正在点击==>突出显示仅出现在这些导航链接上。我尝试像 jjurm 一样修改函数
$ b
$（function（）{
$（＃MenuBar a，＃colOne a）。bind（click，function（）{
var names = $（this）.attr（'name'）;
$（ #MenuBar a）。removeClass（clicked）;
$（＃MenuBar a [name ='names']）。addClass（clicked）;
}） ;
}）;
它不起作用，以前的工作也没有作用
您可以通过简单的css代码来完成这项工作：
#MenuBar a：visited {
background：yellow;
}
编辑： $ b
至于这不适用于javascript链接（但我没有尝试过），jQuery和CSS还有其他解决方案。
jQuery代码：
$（function（）{
$（ （click，function（）{
$（this）.addClass（clicked）;
}）;
}）;
CSS：
#MenuBar a.clicked {
background：yellow;
}
编辑2： $ b
好的，如果你只想保持突出显示只有最后点击的元素，这足以将这个简单的行添加到JavaScript代码：
$（this）.addClass（clicked）; //仅为实际单击的元素添加类
}）;
}）;
Edit3：
如果您希望有更多指向同一位置的链接，并点击其中的所有链接，请按照以下步骤操作：
//删除所有亮点
$（＃MenuBar a，#colOne a）。removeClass（clicked）;
//存储名称属性
var name = $（this）.attr（name）;
//查找具有给定名称的所有元素并突出显示它们
$（＃MenuBar a [name ='+ name +']，#colOne a [name ='+ name +']）。addClass（clicked）;
}）;
}）;
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).
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, javascript or jQuery). Appreciate all suggestions!
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 jjurm like this
$(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
You can do this by simple css code:
#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.
jQuery code:
$(function(){
$("#MenuBar a").bind("click", function(){
$(this).addClass("clicked");
});
});
CSS:
#MenuBar a.clicked {
background: yellow;
}
Edit2:
Ok, if you want to keep highlighted only last clicked element, it's enough to add this simple line to javascript code:
$(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:
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");
});
});
这篇关于点击后更改链接的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
