用H5加css加Js实现table栏切换效果

在HTML5、CSS和JavaScript中，你可以创建动态的表格栏切换效果。通常使用CSS的伪类`:hover`配合JavaScript事件处理来实现这种交互。以下是一个简单的示例：

首先，在HTML中，创建一个基本的表格结构：

<table id="myTable">
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <!-- 添加更多的表头列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 表格行数据 -->
  </tbody>
</table>

然后，在CSS中，给表头添加样式，并定义`:hover`状态下的样式：

th {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

th:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

在JavaScript部分，你可以使用`addEventListener`来监听`mouseover`和`mouseout`事件，切换表头的显示状态：

const tableHeaders = document.querySelectorAll('#myTable th');

tableHeaders.forEach(header => {
  header.addEventListener('mouseover', () => {
    header.classList.add('active');
  });

  header.addEventListener('mouseout', () => {
    header.classList.remove('active');
  });
});

这里我们假设添加了一个名为`.active`的CSS类来更明显地标识当前选中的表头。当鼠标悬停在表头上时，背景颜色会改变；移开鼠标时，背景恢复原样。