通过id点击更改td表背景

change td table background by id click

本文关键字：td 背景 id 通过      更新时间：2023-09-26

我有几家公司的表格，我有这样的菜单：

<ul>
<li><a href="#a"><img src="a"  /></a></li>
<li><a href="#b"><img src="b"  /></a></li>
<li><a href="#c"><img src="c"  /></a></li>
</ul>

在我的表中，我有id为a、b、c的td，当td的id与菜单选项相同时，我想更改td的背景几秒钟

使用它很方便：目标伪类：

@-webkit-keyframes highlight {
    0% {background: coral;}
    100% {background: inherit;}
}
@keyframes highlight {
    0% {background: coral;}
    100% {background: inherit;}
}
td:target {
    -webkit-animation: highlight 1s ease-out; 
    animation: highlight 1s ease-out; 
}
<ul>
    <li><a href="#a"><img src="a"></a></li>
    <li><a href="#b"><img src="b"></a></li>
    <li><a href="#c"><img src="c"></a></li>
</ul>
<table>
    <tr>
        <td id="a">A</td>
        <td id="b">B</td>
        <td id="c">C</td>
    </tr>
</table>

这里有一个jquery解决方案（也有jquery ui）

$(document).ready(function() {
  $('ul li a').on('click', function() {
    var target = $(this).attr('href');
    $(target).css('background', 'red').animate({backgroundColor: '#FFFFFF'}, 'slow');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<ul>
    <li><a href="#a"><img src="a"></a></li>
    <li><a href="#b"><img src="b"></a></li>
    <li><a href="#c"><img src="c"></a></li>
</ul>
<table>
    <tr>
        <td id="a">A</td>
        <td id="b">B</td>
        <td id="c">C</td>
    </tr>
</table>

相关文章：