タブメニュー：アウトラインタブ｜Tab Menu: Outlined Tabs

<div class="container">
    <div class="tab-container">
        <ul>
            <li class="selected" data-id="tab-1">Tab 1</li>
            <li data-id="tab-2">Tab 2</li>
            <li data-id="tab-3">Tab 3</li>
        </ul>
        <div class="tab-content selected" id="tab-1">Good morning. This is the content of Tab 1.</div>
        <div class="tab-content" id="tab-2">Hello. This is the content of Tab 2.</div>
        <div class="tab-content" id="tab-3">Good evening. This is the content of Tab 3.</div>
    </div>
</div>

.tab-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    border-bottom: none;
}

.tab-container ul li {
    flex: 1;
    padding: 16px 24px;
    text-align: center;
    cursor: pointer;
    position: relative;
    color: #999;
    font-weight: 300;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 2px solid #333;
    border-radius: 8px 8px 0 0;
    margin: 0;
}

.tab-container ul li.selected {
    color: #333;
    font-weight: 500;
    background-color: #f0f0f0;
    border: 2px solid #333;
    border-bottom: none;
}

.tab-content {
    display: none;
    padding: 32px 24px;
    min-height: 150px;
    color: #666;
    line-height: 1.6;
    border: 2px solid #333;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #f0f0f0;
    margin-top: -2px;
}

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

(function() {
    const container = document.querySelector('.tab-container');
    if (!container) return;
    const tabs = container.querySelectorAll('ul li');
    const contents = container.querySelectorAll('.tab-content');

    tabs.forEach((tab) => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('selected'));
            tab.classList.add('selected');
            contents.forEach(c => c.classList.remove('selected'));
            const target = document.getElementById(tab.dataset.id);
            if (target) target.classList.add('selected');
        });
    });
})();