是一种前端开发中常见的交互效果,可以通过JavaScript来实现。当用户单击某个td元素时,可以通过修改其样式来改变其颜色。
具体实现步骤如下:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
td {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td onclick="changeColor(this)"></td>
<td onclick="changeColor(this)"></td>
</tr>
<tr>
<td onclick="changeColor(this)"></td>
<td onclick="changeColor(this)"></td>
</tr>
</table>
<script>
function changeColor(td) {
td.style.backgroundColor = 'red';
}
</script>
</body>
</html>
在上述示例中,点击任意一个td元素时,会将其背景颜色修改为红色。
这种交互效果常用于表格、日历等需要用户交互的场景中,可以提升用户体验和可操作性。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云