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

Question

想问一下，点击链接后，如何将每个链接的背景颜色（周围的矩形）改为另一种颜色，而其他链接仍然保持原来的背景颜色。

每个链接对应于放置在同一个 html 文件中的一个 div（我没有在这里包含）。

关键是让观众知道他们在哪个链接。顺便说一句，如果可以的话，我正在寻找 最快的代码 ^_^（纯 css、javascript 或 jQuery）。感谢所有建议！

高亮仅适用于当前链接！ （其他的将有正常的颜色）

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

---

已编辑

伙计们，即使我花了很多时间在这件事上，我仍然坚持这一点，我在页面中添加了一些与上面相同的 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");

    });
});

它没有用，旧的也没有用

Answer 1

在similar question to yours 中，我曾经发现只有允许更改文本颜色如果您使用a:visited 伪类（UPD：和背景颜色是一个），可以更改某些属性其中）。但是由于您的链接是 javascript 链接，:visited 选择器将不起作用，因此您不能将其作为纯 CSS 解决方案。您将不得不使用某种 javascript。如果 jQuery 没问题，你可以试试这个：

$('a').on('click', function(){$(this).css("background-color","yellow");});

也许您可以更改“showonlyone”功能？然后你可以添加背景更改代码。

Answer 2

你可以通过简单的css代码来做到这一点：

#MenuBar a:visited {
    background: yellow;
}

编辑：

至于这不适用于 javascript 链接（但我没有尝试过），还有 jQuery 和 CSS 的其他解决方案。

jQuery 代码：

$(function(){
    $("#MenuBar a").bind("click", function(){
        $(this).addClass("clicked");
    });
});

CSS：

#MenuBar a.clicked {
    background: yellow;
}

编辑2：

好的，如果您只想突出显示最后一次点击的元素，只需在 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
    });
});

编辑3：

如果您想拥有更多指向同一位置的链接，并在单击时突出显示所有链接，请按照以下步骤操作：

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

Answer 3

您可以将active 类添加到单击的锚点。使用 live 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/

注意：getElementsByClassName是IE9+，如果需要支持旧版本使用jQuery：

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

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

Answer 4

$('#MenuBar').on('click', 'a', function() {
    $(this).css('background-color', '#bada55');
});

或者如果您需要独特的颜色，您可以使用数据属性。

<a href="#" data-color="#bada55"></a>

$('#MenuBar').on('click', 'a', function() {
    var $elem = $(this);
    $elem.css('background-color', $elem.data('color'));
});

我建议改为添加类并使用 css 定义样式。

$('#MenuBar').on('click', 'a', function() {
    $(this).addClass('clicked-menu-link');
});

编辑： 要删除其他点击，请使用：

$('#MenuBar').on('click', 'a', function() {
    var fancyClass = 'clicked-menu-link';
    $('#MenuBar a').removeClass(fancyClass).filter(this).addClass(fancyClass);
});