基础 CSS 选项卡

CSS 选项卡是一个十分常见的界面组件，可以看到在许多网站中，比如显卡、音乐播放器、电商平台中都广泛的应用。这个组件在用户体验方面起到了极大的作用，使得用户可以快速地浏览各种信息、数据等。

在本文中，我们将介绍如何使用 CSS 制作一个基础的选项卡组件。

HTML 结构

首先，我们需要先确定选项卡的 HTML 结构。一个基础的选项卡通常由以下几个部分组成：

<div class="tab">
    <ul class="tab-nav">
        <li class="active">选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
    <div class="tab-content">
        <div class="active">这是选项一的内容。</div>
        <div>这是选项二的内容。</div>
        <div>这是选项三的内容。</div>
    </div>
</div>

其中， .tab-nav 是选项卡的导航栏，.tab-content 是选项卡的内容部分。每个选项卡都有一个被 .active 类标记的选中状态，表示当前被选中的选项卡。

CSS 样式

在确定了 HTML 结构之后，我们可以根据这个 HTML 结构，编写 CSS 样式。

首先，我们需要进行一些全局的设置，比如设置默认的字体、字号等：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    padding: 20px;
}

然后，我们可以对 .tab-nav 和 .tab-content 分别进行设置：

.tab {
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.tab-nav {
    display: flex;
    list-style: none;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ccc;
}

.tab-nav li {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

.tab-nav li.active {
    background-color: #fff;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.tab-content div {
    display: none;
    padding: 20px;
}

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

这里，我们使用了 Flexbox 布局来使得导航栏中的选项卡居中对齐，并且使用了 cursor: pointer 来表明这个选项卡是可以点击的。

对于 .tab-nav li.active 和 .tab-content div.active，我们使用了 border 来给它们一个边框，并且使用 background-color: #fff 来让它们看起来更加容易区分。

最后，我们还需要对一些元素在特定状态下的样式进行设置：

.tab-nav li:hover {
    background-color: #ddd;
}

.tab-content div:hover {
    background-color: #eee;
}

这里，我们使用了 :hover 伪类来表示当鼠标悬浮在某个选项卡上时，选项卡以及对应内容的样式发生变化。

JavaScript 交互

最后，我们需要编写一些 JavaScript 代码，使得这个选项卡能够在用户点击时切换选项卡内容。

let tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
    let nav = tab.querySelector('.tab-nav');
    let panes = tab.querySelectorAll('.tab-content div');
    nav.addEventListener('click', e => {
        if (e.target.tagName === 'LI') {
            let index = Array.prototype.indexOf.call(nav.children, e.target);
            for (let i = 0; i < nav.children.length; i++) {
                if (i === index) {
                    nav.children[i].classList.add('active');
                    panes[i].classList.add('active');
                } else {
                    nav.children[i].classList.remove('active');
                    panes[i].classList.remove('active');
                }
            }
        }
    });
});

这里，我们首先使用 document.querySelectorAll('.tab') 选择所有的选项卡元素，并且使用 forEach 遍历每一个选项卡。然后，对于每一个选项卡元素，选择其中的 .tab-nav 和 .tab-content div 元素，并且使用 addEventListener 监听导航栏的点击事件。

在点击事件中，我们首先判断用户点击的是哪一个选项卡，并且获取它的索引。然后，我们循环遍历每一个选项卡，并将选项卡与对应的内容恢复到未激活状态，最后将被点击的选项卡与对应的内容设置为激活状态。

总结

通过以上代码和思路，一个基础的 CSS 选项卡组件就完成了。当然，这只是一个最基础的组件，实际上还有许多方式可以对这个组件进行修改、升级等等。希望这篇文章对想要学习 CSS 的同学们有所帮助。