Question

我有一个HTML表格，

当点击任何单元格时，我想使用css突出显示该单元格，直到单击另一个单元格

我想，我将为该单元格设置焦点并设置焦点css

但它不起作用..

我的代码如下：

$('td').click(function (event) {
    //$(this).tabindex = 0; 
    //$(this).tabindex = 1;
    $(this).focus();
});

和css如下

td:focus
{
    background-color:Blue;
}

我想，我无法将类添加到td，因为当点击其他单元格时我必须删除此类..

请帮助我达到我的要求。

如果有任何其他方法可以实现这个或任何工作，请告诉我..

Answer 1

尝试：

$('td').click(function (event) {
      $('td').removeClass('focus'); //Remove focus from other TDs
     $(this).addClass('focus');
});

和

td.focus { 背景色：蓝色; }

Answer 2

对于初学者，:focus用于表单input字段，我怀疑它可以应用于任何其他元素。你应该使用自己的班级：

JS：

$('td').click(function (event) {
    $('*').removeClass('focus');
    $(this).addClass('focus');
});

CSS：

td.focus {
    background-color:Blue;
}

这种方式聚焦td会使任何可能具有.focus类的其他内容失焦，然后将其设置在所选元素上。

你也可以这样做：

$('*').click(function(event){
    $(this).removeClass('focus');
});
$('td').click(function (event) {
    $(this).addClass('focus');
});

因此，点击任何内容都会取消聚焦焦点的td（类似于以下行为：焦点在输入字段上起作用或如何：在锚标记上起作用）

Answer 3

如果你想让它们“专注”，直到再次点击你可以使用方便的toggleClass函数

请参阅此处的小提琴示例：http://jsfiddle.net/eVS9f/5/

$("td").click(function() {
    $(this).toggleClass("focus");
    });