css tab 选项卡 文章

CSS选项卡是显示网页多个页面时的常用控件，它可以很好地概述不同的内容，并使页面更易于浏览。本文将介绍如何使用CSS创建选项卡控件。

首先，我们需要准备HTML代码。选项卡通常由一组标签和对应的内容区域组成，如下所示：

    <div class="tabs">
        <a href="#tab1">标签1</a>
        <a href="#tab2">标签2</a>
        <a href="#tab3">标签3</a>
        
        <div id="tab1">
            标签1的内容
        </div>
        <div id="tab2">
            标签2的内容
        </div>
        <div id="tab3">
            标签3的内容
        </div>
    </div>

以上代码中，<div class="tabs">是选项卡的容器，<a href="#tab1">等是每个选项卡的标签，#tab1等是对应的内容区域的ID。

接下来，我们需要编写CSS样式来美化选项卡。以下是一个基本的CSS样式代码：

    .tabs {
        display: flex;
        flex-direction: column;
        width: 600px;
        margin: 0 auto;
    }
    
    .tabs a {
        background-color: #fff;
        color: #333;
        padding: 10px;
        font-weight: bold;
        text-decoration: none;
        border: 1px solid #666;
        border-bottom: none;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .tabs a:hover {
        background-color: #f5f5f5;
    }
    
    .tabs a.active {
        background-color: #ccc;
        border-color: #666;
        color: #fff;
    }
    
    .tabs div {
        display: none;
        padding: 10px;
        border: 1px solid #666;
        border-top: none;
    }
    
    .tabs div.active {
        display: block;
    }

以上样式代码使用了FlexBox布局，并对选项卡的标签和内容进行了不同的样式设置。其中，.tabs a:hover和.tabs a.active是为了设置鼠标悬停和当前激活选项卡的样式，.tabs div.active是为了显示当前激活选项卡的内容。

最后，我们需要添加一些JavaScript脚本来处理选项卡的交互。以下是一个基本的JavaScript脚本代码：

    var tabs = document.querySelectorAll('.tabs a');
    var tabContents = document.querySelectorAll('.tabs div');
    
    function showTab(tabIndex) {
        for (var i = 0; i < tabs.length; i++) {
            if (i === tabIndex) {
                tabs[i].classList.add('active');
                tabContents[i].classList.add('active');
            } else {
                tabs[i].classList.remove('active');
                tabContents[i].classList.remove('active');
            }
        }
    }
    
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click',function(event) {
            event.preventDefault();
            var index = Array.prototype.indexOf.call(tabs,event.target);
            showTab(index);
        });
    }
    
    showTab(0);

以上脚本代码使用了循环和数组方法，当用户点击标签时会触发showTab()函数，该函数会根据选项卡的索引来显示和隐藏对应的内容。

至此，我们已经完成了一个基于CSS的选项卡控件。