css tab 滑动

CSS tab 滑动效果能够使你的内容更加有趣和与众不同。它可以增加网站的互动性和用户参与度。在这篇文章中，我们将介绍如何使用 CSS 实现简单的 Tab slide 滑动效果。

HTML 结构示例：
<div class="tab-menu">
    <ul class="menu">
        <li class="active">Tab1</li>
        <li>Tab2</li>
        <li>Tab3</li>
    </ul>
</div>
<div class="tab-content">
    <div class="content active">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
</div>

CSS 样式示例：
.tab-menu {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 0;
    margin: 0;
}

.tab-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.tab-menu ul li {
    display: inline-block;
    padding: 10px 15px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    margin-right: 5px;
}

.tab-menu ul li:hover {
    background-color: #666;
}

.tab-menu ul li.active {
    background-color: #fff;
    color: #333;
}

.tab-content {
    width: 100%;
    height: auto;
    background-color: #fff;
}

.tab-content .content {
    display: none;
}

.tab-content .active {
    display: block;
}

上述代码实现了简单的 Tab slide 滑动效果。需要注意的一点是，选中的 Tab 栏必须设置为“active”，并且当前显示的内容也必须设置为“active”，同时其他内容设置为“display：none”。

通过 CSS 的样式设置，我们可以轻松地实现 Tab slide 滑动效果，这样可以增加网站的互动性和用户参与度。希望这篇文章能够帮助你更好地理解如何使用 CSS 实现简单的 Tab slide 滑动效果。