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>

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