变化TD表格背景点击

Question

我有几个公司的表，我有菜单是这样的：

<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> 

在我的表，我已经TD的id为的：A，B，C，我想改变TD的背景几秒钟，当TD的一样的菜单选项的id

Answer 1

是很方便的使用这个:target pseudo-class：

@-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>

Answer 2

继承人一个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>