修改layui垂直菜单栏选中背景色

以下是修改Layui垂直菜单栏选中背景色的方法：

1. 在CSS文件中添加以下代码：

.layui-nav-tree .layui-this a {
  background-color: #009688;
  color: #fff;
}

2. 如果想要修改选中时的图标颜色，可以添加以下代码：

.layui-nav-tree .layui-this i {
  color: #fff;
}

3. 如果想要修改选中时的子菜单背景色，可以添加以下代码：

.layui-nav-tree .layui-nav-child dd.layui-this a {
  background-color: #00897b;
  color: #fff;
}

相关问题

layui横向菜单切换，菜单背景图切换

可以使用layui的tab组件和CSS3的background-image属性来实现横向菜单切换和菜单背景图切换。

首先，需要引入layui的tab组件：

<!-- 引入layui的CSS文件和JS文件 -->
<link rel="stylesheet" href="//cdn.layui.com/layui-v2.5.6/css/layui.css">
<script src="//cdn.layui.com/layui-v2.5.6/layui.js"></script>

<!-- 创建一个容器来显示tab内容 -->
<div class="layui-tab-content">
    <div class="layui-tab-item layui-show">菜单1的内容</div>
    <div class="layui-tab-item">菜单2的内容</div>
    <div class="layui-tab-item">菜单3的内容</div>
</div>

<!-- 创建一个菜单栏 -->
<ul class="layui-tab-title">
    <li class="layui-this">菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
</ul>

然后，可以使用CSS3的background-image属性来实现菜单背景图切换。首先，需要给每个菜单项添加一个data-bg属性，用来存放菜单项对应的背景图路径：

<ul class="layui-tab-title">
    <li class="layui-this" data-bg="bg1.jpg">菜单1</li>
    <li data-bg="bg2.jpg">菜单2</li>
    <li data-bg="bg3.jpg">菜单3</li>
</ul>

然后，在菜单项被选中时，使用jQuery来修改菜单栏的背景图：

<script>
    layui.use(['element', 'jquery'], function(){
        var element = layui.element;
        var $ = layui.jquery;
        
        // 监听tab切换事件
        element.on('tab', function(data){
            var bg = $('.layui-tab-title .layui-this').data('bg');
            $('.layui-tab-title').css('background-image', 'url(' + bg + ')');
        });
    });
</script>

这样，当菜单项被选中时，对应的背景图会被显示在菜单栏上。

el-menu选中菜单背景色

要为el-menu中选中的菜单设置背景色，你可以使用以下CSS样式来实现：

.el-menu .el-menu-item.is-active {
  background-color: #f0f0f0; /* 设置选中菜单的背景色 */
}

将上述代码添加到你的样式表中，然后在el-menu中的菜单项上添加`is-active`类。这样，当菜单项被选中时，会应用该样式，并将其背景色设置为指定的颜色。

注意：上述代码中的颜色值`#f0f0f0`仅为示例，你可以根据需要自行调整颜色值。