css tab换页

CSS中有许多方法来实现标签页切换效果，其中最常用的是使用CSS样式来改变页面元素的显示和隐藏。在本文中，我们将介绍如何使用CSS来创建标签页切换效果。

/* 首先，在CSS中设置标签页的样式 */

.tab {
  overflow: hidden;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 15px;
}

/* 添加标签按钮的样式 */

.tab button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 15px;
  margin-right: 5px;
  cursor: pointer;
}

/* 为选中的标签按钮添加样式 */

.tab button.active {
  background-color: #ccc;
}

/* 设置标签页内容的样式 */

.tabcontent {
  display: none;
  padding: 15px;
  border: 1px solid #ccc;
}

/* 为选中的标签页内容添加样式 */

.tabcontent.active {
  display: block;
}

下一步是编写JavaScript代码，以便使用CSS样式来控制标签页的切换。

/* 使用JavaScript代码来实现标签页的切换 */

// 获取页面上所有的标签按钮
var tabButtons = document.querySelectorAll(".tab button");

// 获取所有的标签页内容
var tabContents = document.querySelectorAll(".tabcontent");

// 遍历所有的标签按钮
tabButtons.forEach(function(button) {
  // 为每个标签按钮添加click事件监听
  button.addEventListener("click", function() {
    // 移除所有标签按钮的active类
    tabButtons.forEach(function(button) {
      button.classList.remove("active");
    });
    // 给当前点击的标签按钮添加active类
    button.classList.add("active");
    // 获取当前标签按钮的索引值
    var index = [...tabButtons].indexOf(button);
    // 隐藏所有标签页内容
    tabContents.forEach(function(content) {
      content.classList.remove("active");
    });
    // 显示当前标签页的内容
    tabContents[index].classList.add("active");
  });
});

现在，我们已经成功地使用CSS和JavaScript来创建标签页切换效果了。