css tabs下划线切换

CSS tab选项卡经常用于网站的导航栏中，它可以切换不同的内容页面。在这个过程中，一个常用的设计是选中tab时下方会出现下划线，提示用户当前所处的选项卡。下面展示如何实现这个功能：

    .tab {
        display: inline-block;
        border-bottom: 3px solid gray;
        padding: 10px;
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
    }
    
    .tab.active {
        border-bottom: 3px solid blue;
    }

首先，我们创建一个tab类，表示每个选项卡。我们使用inline-block属性让tab在同一行中展示，然后使用边框属性创建底部下划线。在这里，我们将下划线的颜色设置为灰色。我们还添加了一些padding，字体大小和字体加粗，使选项卡看起来更协调。最后，我们使用margin-right属性在选项卡之间添加一些间距。

接着，我们创建一个.active类用于标识当前选中的选项卡。当用户点击一个选项卡时，我们使用JavaScript或jQuery代码添加.active类，此时下划线的颜色将改变。在这个例子中，我们将下划线的颜色设置为蓝色。

最后，我们可以在HTML文件中使用这个CSS代码：

    <div class="tabs">
        <div class="tab active">选项卡1</div>
        <div class="tab">选项卡2</div>
        <div class="tab">选项卡3</div>
    </div>

在这个例子中，我们将每个选项卡定义为tab类，并将第一个选项卡设置为.active类。这将使第一个选项卡被选中，下划线颜色为蓝色，其他选项卡下划线颜色为灰色。当用户点击其他选项卡时，我们将移除.active类，再将其应用到用户所选的选项卡上。