javascript - 纯CSS可否实现如下表格的阴影效果？
本文介绍了javascript - 纯CSS可否实现如下表格的阴影效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
只用CSS能否实现点了多行的checkbox，则只有最后一行显示阴影，如果点了一行则只显示那一行的阴影？
如果没法实现JS应该怎么做？
解决方案
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table, td { border: 1px solid #000; }
tr { cursor: pointer; }
tr.active { color: #f00; }
tr.shadow {
background-color: #fff;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<table>
<tr>
<td>aa</td>
<td>11</td>
</tr>
<tr>
<td>bb</td>
<td>22</td>
</tr>
<tr>
<td>cc</td>
<td>33</td>
</tr>
<tr>
<td>dd</td>
<td>44</td>
</tr>
<tr>
<td>ee</td>
<td>55</td>
</tr>
<tr>
<td>ff</td>
<td>66</td>
</tr>
<tr>
<td>gg</td>
<td>77</td>
</tr>
</table>
<script>
var tr = document.querySelectorAll('tr');
for (var i = 0, len = tr.length; i < len; i++) {
tr[i].index = i;
tr[i].maxLength = tr.length - 1;
tr[i].addEventListener('click', function () {
if (this.classList.contains('active')) {
this.classList.remove('active', 'shadow');
if (this.previousElementSibling && this.previousElementSibling.classList.contains('active')) {
this.previousElementSibling.classList.add('shadow');
}
} else {
this.classList.add('active');
if (this.index === this.maxLength || !this.nextElementSibling.classList.contains('active')) {
this.classList.add('shadow');
}
if (this.previousElementSibling && this.previousElementSibling.classList.contains('active')) {
this.previousElementSibling.classList.remove('shadow');
}
}
});
}
</script>
</body>
</html>这篇关于javascript - 纯CSS可否实现如下表格的阴影效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
