Question

我想列出点击时突出显示的网址列表，问题是任何时候都只应突出显示一个链接。

我可以让重置按钮工作。使用removeAttr) - $("a").removeAttr("style") - （这样做是否有任何负面影响？）

但我无法让它一次只做一个亮点。

有人可以帮我一个示例代码，一次只突出显示一个链接吗？现在，可以突出显示多个链接。

我能够在Jsfiddle http://jsfiddle.net/M3vVw/3/

上做一个例子

Answer 1

我建议这样做：创建CSS规则并将其应用于您单击的元素，首先从所有链接中删除相同的样式。

<强>的jQuery

$("a").click(function () {
    $('a').removeClass('back');
    $(this).addClass('back');
});
$("#btn").click(function () {
    $("a").removeClass("back")
});

<强> CSS

.back {
    background-color: #ff3fff;
}

<强> jsFiddle example

Answer 2

我建议使用addClass()（adeneo already suggested），但如果您必须使用attr()：

$('a').click(function(){
    var that = $(this);
    that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').attr('style', '');
});

JS Fiddle demo

或者：

$('a').click(function(){
    var that = $(this);
    that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').removeAttr('style');
});

JS Fiddle demo

请记住，使用attr() / removeAttr()具有令人难以置信的破坏性，需要多更多的工作和维护（您必须明确重构每个的CSS of styled element的属性每个时间）; addClass() / removeClass()效率更高，因为它包含外部的所有样式，在需要时可以轻松地为元素添加/删除样式。

参考文献：

Answer 3

您可以使用：

$("a").click(function()
{
      $(this).css("backgroundColor", "#ff3fff");
      $("a").not($(this)).removeAttr("style");
});

$("#btn").click(function(){
   $("a").removeAttr("style")
});

Answer 4

的 LIVE DEMO

CSS：

a.active{ background:#ff3fff; }

jQuery的：

function removeActive(){ $("a").removeClass("active"); } $("a").click(function( e ){ e.preventDefault(); removeActive(); $(this).addClass("active"); }); $("#btn").click(removeActive);

使用Jquery后台更改css - 如何一次只允许一个链接

4 个答案: