css切换标签显示隐藏 |css loading 字体动画

.tab {
display: none;
}
.active {
display: block;
}

代码中，.tab是一个类选择器，表示需要隐藏的标签。display属性设置为none，表示不显示。.active也是一个类选择器，表示当前需要显示的标签。display属性设置为block，表示显示。

实现这种效果的关键是通过JavaScript动态修改标签的类名。以下是一个简单的示例代码：

function switchTab(tabIndex) {
// 隐藏所有的tab
var tabs = document.querySelectorAll('.tab');
for (var i = 0; i< tabs.length; i++) {
tabs[i].classList.remove('active');
}
// 显示指定的tab
var tab = document.querySelector('.tab:nth-child(' + (tabIndex + 1) + ')');
tab.classList.add('active');
}

代码中，switchTab()函数接受一个参数tabIndex，表示需要显示的标签的索引。首先，使用querySelectorAll()方法获取所有的.tab元素，遍历每个元素，并使用classList.remove()方法移除active类名，从而隐藏所有的标签。然后，通过querySelector()方法获取指定的.tab元素，并使用classList.add()方法添加active类名，从而显示指定的标签。

通过CSS切换标签显示隐藏，可以轻松地实现网站页面中的选项卡、折叠面板等效果，提升用户体验和交互性。