更改选定的CSS元素

我知道有一个简单的方法来做到这一点，但我似乎无法找到它。我有一个下拉框，里面有一个列表。一旦将鼠标悬停在列表中的任何一个项目上，它都会被边框包围。这很棒。更改选定的CSS元素

我要的是当用户从该列表中选择一个项目进行。它会自动将背景颜色更改为#ddd。

如果用户选择列表中的其他项目，将取消选择其他项目的项目背景。

所以，我有一个名为“喜”类。

我的CSS是像这样：

#changer a{ 
    padding:3px; 
    border: solid 1px #fff;  
} 
#changer a.hi{ 
    background:#ddd; 
} 
#changer a:hover{ 
    border: solid 1px #ddd; 
    text-decoration:none; 
}

我已经添加了这个脚本，但它只是从列表中选择项目，但它不会取消选择另外一个。它只是切换背景颜色。

<script type="text/javascript"> 
$(function() { 
    $("a").click(function() { 
    $(this).toggleClass("hi"); 
    }); 
}); 
</script>

任何帮助将主要赞赏。

干杯，

强尼

来源

2012-03-29 Jonah

试试这个：

$("a").click(function() { 

    // remove existing "hi"s on other links 
    $("a.hi").not(this).removeClass("hi"); 

    // toggle "hi" on this 
    $(this).toggleClass("hi"); 
});

如果你想链接的行为类似于互斥的复选框（只能选择一个，也可以取消目前的），那么使用上面的代码，但是如果你希望它们像一组单选按钮（只能选择一个，但不能取消选择当前），请使用下面的代码。

$("a").click(function() { 

    // remove existing "hi"s on other links 
    $("a.hi").not(this).removeClass("hi"); 

    // add "hi" to this 
    if (!$(this).hasClass('hi')) 
     $(this).addClass("hi"); 
});

来源

2012-03-29 09:41:33

完美。谢谢。 – Jonah 2012-03-29 09:44:17

完美。谢谢。虽然，我在这里会有些尴尬，并询问这个列表是否分为两个，并且它们都有相同的类。我如何区分拆分？所以如果我有选择从列表中选择5项。我可以使用上面的代码来做到这一点。但是如果列表中有两个其他项目，需要在他们自己的案例中选择或取消选择呢？我希望这样做会有所帮助。 – Jonah 2012-03-29 09:51:39

这并不难。因为它是在对原有问题的范围，我不会追加解决的答案，但你可以检查一个可能的方式在这个[的jsfiddle（http://jsfiddle.net/GoranMottram/smWx3/） – 2012-03-29 09:58:46

您可以在此写这样使用:active：

#changer a:active{ 
    background:#ddd; 
}

来源

2012-03-29 09:45:07 sandeep

更改选定的CSS元素

回答

相关问题