JS 38 - 实作 Tab 页签

大家好！

样式

.tabs {
    width: 100%;
    max-width: 60em;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 0.3125em;
    margin: auto;
    padding: 5em;
    overflow: hidden;
}

.tabs > label {
    flex: 1;
    order: 1;
    background-color: #7de1c8;
    font-weight: bold;
    text-align: center;
    padding: 1em 2em;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tabs > label:hover {
    background-color: #c8fae1;
}

.tabs > label.active {
    background-color: transparent;
    cursor: default;
}

.tabs > article {
    flex: 1 1 100%;
    order: 2;
    height: 0;
    padding: 0 2em;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

.tabs > label.active + article {
    height: auto;
    padding: 2em;
    opacity: 1;
    visibility: visible;
    transition: padding 0.25s,
                opacity 0.5s 0.25s;
}

程序码

Felix(window).on('load', function () {
    Felix('.tabs > label').on('click', function () {
        const children = this.parentElement.children;
        Felix.forEach(children, function (el) {
            if (el.tagName !== 'LABEL') return;
            if (el.className.indexOf('active') === -1) return;
            el.classList.remove('active');
        });
        this.classList.add('active');
    });
});

实测

<section class="tabs" data-revealing="float-in bottom">
    <label class="active">HTML</label>
    <article>...</article>
    <label>CSS</label>
    <article>...</article>
    <label>JavaScript</label>
    <article>...</article>
</section>

范例连结制作中。

差不多也到尾声了。
如果对文章有任何疑问，也欢迎在下方提问和建议！
我是 Felix，我们明天再见！