[分享]css两个页签

在网站设计中，页签经常被用于页面布局中，可以使用户快速找到所需要的信息。CSS可以帮助我们设计出漂亮的页签效果。本文将介绍实现两个页签的方法。首先，我们需要使用HTML创建两个div元素，来实现页签的...

在网站设计中，页签经常被用于页面布局中，可以使用户快速找到所需要的信息。CSS可以帮助我们设计出漂亮的页签效果。本文将介绍实现两个页签的方法。

首先，我们需要使用HTML创建两个div元素，来实现页签的布局。代码如下：

<div class="tab">
    <div class="active">页签1</div>
    <div>页签2</div>
</div> 

在CSS中，使用以下代码可以定义页签的样式：

.tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.tab div {
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.tab div.active {
    background-color: #0066CC;
    color: #fff;
} 

代码解释：

• 通过display: flex属性，将两个页签水平居中显示
• justify-content: center和align-items: center可以将页签垂直居中显示
• 通过height属性设置页签的高度
• 设置每个页签的宽度和背景颜色等样式，制作出漂亮的效果
• active类定义了活动页面的样式，可以在JS中进行切换

如果想让用户点击页签之后切换显示内容，可以使用JavaScript来实现。代码如下：

const tabs = document.querySelectorAll('.tab div');

tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        tabs.forEach(tab => tab.classList.remove('active'));
        tab.classList.add('active');
    });
}); 

代码解释：

• 使用querySelectorAll方法获取所有页签
• 遍历每个页签，使用addEventListener方法为其添加点击事件
• 在事件处理程序中，先将所有页签的active类移除，然后给点击的页签添加active类

到此为止，我们就实现了一个简单的双页签功能。在实际开发中，可以根据需要进行样式和JS的修改，实现更复杂的页签交互效果。