Question

可能重复：
i want to change the background color after clicking?

如何更改表格中项目的背景？

当鼠标悬停在任何项目上时，它的颜色会发生变化，因此我使用了CSS代码：

.meun:hover{
         background-color: #EFF2F7;
}

这样可以更改所点击项目的背景颜色我使用了这个小java脚本代码

function getclick(elem)
{
    elem.style.backgroundColor = '#EFF2F7';
}

所以我现在想要，如果我点击其他项目前一项目返回它的默认颜色white并且下一项更改并且css中的hover继续工作，就像facebook左菜单......

有关详细信息，这是我编写的代码

http://jsfiddle.net/NA8Dj/

Answer 1

您可以使用自定义样式（而不是显式设置背景颜色）将css类添加到这些元素，然后修改您的函数，如：

function getclick(elem)
{
//find any elemenet with given class
//remove that class from it
//add that class to 'elem'
}

我不知道纯javascript中的语法是否正确，但使用jQuery，它可能是：

// find any element with given class and remove it
$('.yourClass').removeClass('yourClass');
// add that class to clicked element
elem.addClass('yourClass');

您可以看到working example here 顺便说一下：你的例子不适合我。

Answer 2

这是一个纯JavaScript版本。它使用事件委派，这意味着只有一个点击处理程序被分配给表，而不是每个单元格：

(function() {
    var current,
        table = document.getElementById('table'); // I gave the table 
                                                  // the uncreative ID `table`
    table.onclick = function(event) {
        event = event || window.event;
        var target = event.target || event.srcElement;

        if(target.nodeName !== 'TD') {
            do {
               target = target.parentNode;
            } while(target && target.nodeName !== 'TD');
        }

        if(target) {
            if(current) {
                current.style.backgroundColor = '';
            }
            target.style.backgroundColor = '#EFF2F7';
            current = target;
        }
    };
}());

DEMO

如何更改表格中项目的背景？

2 个答案: