Layui 标签栏改变颜色

最新推荐文章于 2022-08-07 17:37:23 发布

原创最新推荐文章于 2022-08-07 17:37:23 发布 · 1.7w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#其他

Layui 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS自定义layui框架中Tab页面的样式，包括改变激活Tab的颜色、字体加粗及背景色，使用户能清晰识别当前所处的页面。

在这里插入图片描述
默认如上述，
如下修改成颜色:
这样明显知道当前在哪个页面

<style>
        /*点击tab页字体加粗*/
        .layui-tab-title .layui-this{
            color: black;
            font-weight:bolder;
        }
        /*点击tab页背景色改变，以显眼当前在哪个标签页的主体页面*/
        .layadmin-pagetabs .layui-tab-title li:hover, .layadmin-pagetabs .layui-tab-title li.layui-this{
            background-color: #2F9688;
        }

    </style>