如何开启CSS分类标签页 - css学习-微参考

在网页设计中，分类选项卡是一种常见的用户界面元素，用于将内容组织成不同的部分，让用户可以通过点击不同的标签来切换显示的内容。使用CSS来实现分类选项卡不仅可以让界面美观，而且可以提高用户体验。以下是实现分类选项卡的一种方法。

HTML结构

首先，我们需要定义选项卡的HTML结构。通常，这会包括一个`ul`列表用于选项卡标题，以及一个包含内容的`div`容器。



选项卡1
选项卡2
选项卡3

内容1
内容2
内容3

这里，`.tab-item`是选项卡标题的类名，而`.tab-content`是内容的类名。`data-target`属性用于关联选项卡标题和对应的内容。

CSS样式

接下来，我们需要用CSS来美化这些元素。

.tab-container {
max-width: 600px;
margin: 0 auto;
}

.tab-list {
list-style: none;
padding: 0;
display: flex;
}

.tab-item {
padding: 10px;
margin: 5px;
cursor: pointer;
border: 1px solid #ccc;
border-bottom: none;
}

.tab-item.active {
background-color: #f0f0f0;
}

.tab-content {
border: 1px solid #ccc;
padding: 10px;
}

JavaScript行为

最后，我们需要用JavaScript来添加交互功能，允许用户点击选项卡标题来切换内容。

document.querySelectorAll('.tab-item').forEach(function(tab) {
tab.addEventListener('click', function() {
var target = this.getAttribute('data-target');
document.querySelectorAll('.tab-content').forEach(function(content) {
if (content.id === target) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});

document.querySelectorAll('.tab-item').forEach(function(item) {
item.classList.remove('active');
});
this.classList.add('active');
});

});