Question

我想询问如何在点击链接后将每个链接的背景颜色（围绕它的矩形形状）更改为一种不同的颜色，并且其他链接仍保留其原始背景颜色< /强>

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

重点是让观众知道他们所处的链接。顺便说一下，如果可以，我正在寻找最快的代码^ _ ^ （纯 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>  </div> 

function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(1000).fadeIn(500); } else { $(this).hide(1500).fadeOut(500); } }); }

的 EDITED 的

伙计们，有一件事我仍然坚持，即使我花了很多时间，我在页面中添加了一些与上面相同的JavaScript链接，并认为这些新链接将是功能就像前者一样。正在点击==＆gt;突出显示将仅显示在这些导航链接上。我试图像 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; }

<强> EDIT2：

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

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

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

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

Answer 4

您可以向点击的锚点添加active类。使用实时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/

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

的 EDITED 的

4 个答案: