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>

在我的表格中，我已经记下了id：a，b，c，我想在td＆＃39的id时改变td的背景几秒钟; s与菜单选项

相同

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>

通过id点击更改td表格背景

2 个答案: