登录
首页 >  文章 >  前端

Vue/UniApp 选项卡选中时如何添加边框和背景色？

时间：2024-11-11 23:00:58 325浏览 收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《Vue/UniApp 选项卡选中时如何添加边框和背景色？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

Vue/UniApp 选项卡选中时如何添加边框和背景色？

vue/uniapp中选中时有边框和背景色的选项卡如何实现

原帖中提供的代码不能实现选中时有边框和背景色的效果。下面是用 html 实现这种效果的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="tabs">
        <div class="tab active">日</div>
        <div class="tab">周</div>
        <div class="tab">月</div>
        <div class="tab">年</div>
    </div>
</body>
<style>
.tabs {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: #E1E1E1;
    border-radius: 82px;
    height: 82px;
}

.tab {
    font-size: 36px;
    color: rgba(69, 69, 68, 1);
    width: 100%;
    text-align: center;
    line-height: 82px;
}

.tab.active {
    color: rgba(255, 255, 255, 1);
    background-color: #31BDEC;
    border-radius: 82px;
}
</style>
</html>

效果如下：
[图片]

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>