完成一个tabber选项卡功能

完成一个基础的Tabber选项卡功能，通常是在网页上展示内容切换的组件。我们可以使用HTML、CSS和JavaScript（或者使用现成的库如jQuery UI或Bootstrap）来实现。下面是一个简单的例子，使用纯CSS样式和JavaScript事件处理：

**HTML结构：**

<div id="tab-container">
    <ul class="tabs">
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div class="content">
        <div id="tab1" class="tab-content active">Content for Tab 1</div>
        <div id="tab2" class="tab-content">Content for Tab 2</div>
        <div id="tab3" class="tab-content">Content for Tab 3</div>
    </div>
</div>

**CSS样式：**

.tabs {
    display: flex;
    list-style-type: none;
}
.tabs a {
    padding: 10px 20px;
    text-decoration: none;
    color: black;
    border-bottom: 1px solid #ccc;
}

.tabs a.active {
    background-color: #f1f1f1;
    border-bottom-color: white;
}

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

**JavaScript事件处理：**

window.addEventListener("DOMContentLoaded", function() {
    var tabs = Array.from(document.querySelectorAll('.tabs a'));
    tabs.forEach(function(tab, index) {
        tab.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默认链接跳转
            var content = document.querySelector('#' + this.getAttribute('href'));
            tabs.forEach(function(t) {
                t.classList.remove('active');
            });
            this.classList.add('active'); // 选中当前点击的选项卡
            content.classList.toggle('active'); // 显示对应的选项卡内容
        });
    });
});

当你点击不同的选项卡标签时，对应的内容区域会被激活并显示出来。