Question

我在“mytable”表中有这样的菜单：

<td id="1" align="center" onclick="clicked(1);"> one </td >
<td id="2" align="center" onclick="clicked(2);"> two </td >
<td id="3" align="center" onclick="clicked(3);"> three </td>
<td id="4" align="center" onclick="clicked(4);"> four </td> 
...

css：

#mytable {
   background:#d0d0df;
   cursor:pointer;
}
#mytable td{
   background:#4092c4;
   color:#efefef;
}
#mytable td:hover{
   background:#e0e0e0;
   color:#FF004F;
}

javascript：

function clicked(k){
   for (x=1; x<5; x++){ // reset all cells
      document.getElementById(x).style.background='#4092c4';
      document.getElementById(x).style.color='#efefef';
   }
   // set cell
   document.getElementById(k).style.background='#106284';
   document.getElementById(k).style.color='#FF004F';
}

如何突出显示单击的单元格并维护悬停功能？上面的代码有效，但在调用clicked（）之后，悬停功能就丢失了。我宁愿不使用jquery。

Answer 1

语法问题，只是数字的ID不是有效的HTML。

你遇到的问题是，当javascript运行时，它会在元素上内嵌样式，并且CSS样式不能覆盖内联（不是没有添加像!important这样的东西，而且只是变得丑陋）。

我会避免在JS中编写样式，只是用它来改变类。所以创建一个新类，让我们调用它.active，当你单击一个tablecell时，只需添加该类，然后从所有其他类中删除该类。

类似的东西（这只是示例，可能需要进行一些调整）

function clicked(k){
    var otherCell, thisCell;
    for (x=1; x<5; x++){ // reset all cells
        otherCell = document.getElementById(x);
        otherCell.className = otherCell.className.replace('active','');

    }
    // set cell as active
    thisCell = document.getElementById(k);
    thisCell.className += thisCell.className + ' active';
}

然后仅在css中设置样式，例如

#mytable {
    background:#d0d0df;
    cursor:pointer;
}
#mytable td{
    background:#4092c4;
    color:#efefef;
}

#mytable td.active{
    background:#106284;
    color:#efefef;
}

#mytable td:hover{
    background:#e0e0e0;
    color:#FF004F;
}

通过这种方式，您可以更好地控制＆＃39;级联＆＃39;风格规则，更具体或改变规则的顺序将给你可能的不同结果。

根据小提琴here

Answer 2

这可能有些过分，但jQuery javascript库使这一点变得微不足道。

我已经使用table来解决HTML问题，因为应该避免使用非表格数据。

新HTML：

<ul id="mytable">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

另请注意，商品上没有ID，也没有内嵌式javascript，干净整洁。

新CSS：

#mytable {
    background:#d0d0df;
    cursor:pointer;
    list-style:none;
    padding-left:0;
}
#mytable li {
    background:#4092c4;
    color:#efefef;
    display:inline-block;
    margin:2px -2px 2px 2px;
    padding:3px;
}
#mytable li:hover {
    background:#e0e0e0;
    color:#FF004F;
}
#mytable li.active {
    background:#106284;
    color:#efefef;
}

注意：我已使用inline-block为列表项定位，您也可以使用float或table-cell。这是一篇关于floats vs inline-blocl的好文章。另请注意新的active类。

现在为超级简单的jquery（确保包含jquery库！）

$(document).ready(function(){ //Performs the following code when the document is fully loaded
   //Assigns a click event handler to list items in an element with ID "myTable"
   $("#mytable li").click(function () {
       //Remove the active class from list items in #mytable that were not clicked
       $("#mytable li").not($(this)).removeClass("active");
       //Add the active class to the clicked element.
       $(this).addClass("active");
   });
});

Fiddle

只需确保include the jquery library并使用$(document).ready();

即可

方便的jQuery链接

表单击了单元格颜色方案

2 个答案: