单击后更改链接的背景颜色

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

每个链接对应一个div放在同一个html文件中(我没有在这里包含)。

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!

关键是让观众知道他们所处的链接。顺便说一下,如果可以,我正在寻找最快的代码^ _ ^(纯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 jjurm like 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

它没有用,过去工作的旧的也没用

4 个解决方案

#1

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:

$(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:

好的,如果你想只保留最后点击的元素,只需将这个简单的行添加到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:

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

#2

In a similar question to yours I once found out that only ~~changes in text color are allowed~~ some properties can be changed if you use a:visited pseudo-class (UPD: and background-color is one of them). But since your links are javascript links, the :visited selector 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:

在与你的问题类似的问题中,我曾经发现只允许文本颜色的变化,如果你使用了一个属性,那么可以改变一些属性:被访问的伪类(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”功能?然后你可以添加背景更改代码。

#3

You can add an active class to the clicked anchor. Using live NodeList should work really fast as you also need to unselect previously selected item:

您可以向单击的锚点添加活动类。使用实时NodeList应该非常快,因为您还需要取消选择以前选择的项目:

var a = document.getElementById('Navigation').getElementsByClassName('active');

$('#Navigation').on('click', 'a', function() {
    if (a[0]) a[0].className = '';
    this.className = 'active';
});

http://jsfiddle.net/vBUCJ/

Note: getElementsByClassName is IE9+ if you need to support older versions use jQuery:

注意:如果你需要支持旧版本使用jQuery,则getElementsByClassName是IE9 +:

var $a = $('#Navigation a');
$('#Navigation').on('click', 'a', function() {
    $a.removeClass('active');
    $(this).addClass('active');
});

http://jsfiddle.net/vBUCJ/1/

#4

$('#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);
});

#1