给定这个 HTML:
<html>
<head>
<style type="text/css">
tr.Class1
{
background-color: Blue;
}
.Class2
{
background-color: Red;
}
</style>
</head>
<body>
<table>
<tr id="tr1">
<td>Row 1</td>
</tr>
<tr id="tr2">
<td>Row 2</td>
</tr>
</table>
</body>
</html>
下面是脚本部分。当我点击第一行时会发生什么？它会保持蓝色，还是会变成红色？如果它将保持蓝色，我如何在不从行中删除 Class1 类的情况下让它变成红色而不是(这样我可以稍后删除 Class2 类，并且该行将恢复为原来的蓝色)？
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#tr1").addClass("Class1");
$("tr").click(function() {
/* clicked tr's should use the Class2 class to indicate selection, but only one should be selected at a time */
$(".Class2").removeClass("Class2");
$(this).addClass("Class2");
});
});
</script>
编辑 我应该说 - 我试过了，但它没有按预期工作(在 FireFox 或 IE 中)。这是怎么回事？
最佳答案
它应该变成红色...这就是它被称为级联样式表的原因...新添加的属性会覆盖旧的。
关于jquery - 在 HTML 元素上应用多个 CSS 类 (jQuery addClass)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/756697/