layui实现2级菜单页面跳转_layui实现左侧菜单点击右侧内容区显示

最新推荐文章于 2022-07-14 21:42:46 发布
最新推荐文章于 2022-07-14 21:42:46 发布
阅读量1.9k 收藏 1
点赞数
文章标签： layui实现2级菜单页面跳转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39712821/article/details/112834453
版权
本文介绍了如何使用layui前端框架实现左侧菜单点击时，右侧内容区动态加载对应的tab页面。通过监听菜单元素的点击事件，结合layui的tabAdd和tabChange方法，动态创建和切换tab。详细讲解了实现逻辑，并提供了相关代码示例。
摘要由CSDN通过智能技术生成

layui这个前端框架对后端人员来说提供了极大的方便，很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了，刚好最近需要开发一个后台管理项目，就拿layui来进行学习和实践．

还没有接触到的同学可以先通读一遍文档，这样在遇到问题的时候才能够对症下药，仔细研究相关的板块

今天我们先来学习一下使用layui来实现左侧点击菜单，内容区显示tab

实验效果

实现过程

html代码

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<?php echo $curTitle;?>
    最低0.47元/天 解锁文章
    weixin_39712821
    关注
    layui实现左侧菜单点击右侧内容区显示
    10-16
    主要为大家详细介绍了layui实现左侧菜单点击右侧内容区显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    layui菜单列表不自动展开_layui实现左侧菜单点击右侧内容区显示
    weixin_42308943的博客
    12-31 2815
    layui这个前端框架对后端人员来说提供了极大的方便，很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了，刚好最近需要开发一个后台管理项目，就拿layui来进行学习和实践．还没有接触到的同学可以先通读一遍文档，这样在遇到问题的时候才能够对症下药，仔细研究相关的板块今天我们先来学习一下使用layui来实现左侧点击菜单，内容区显示tab实验效果实现过程html代码content="width=d...
    Layui实现左侧点击菜单，右侧显示内容
    热门推荐
    红烧大熊猫的博客
    08-16 2万+
    Layui实现左侧点击菜单，右侧显示内容 功能简介： layui实现点击左侧的菜单，在右侧显示内容。 其实并不是非要layui前端框架，这个左侧点击，右边显示内容的原理是iframe完成的，其它框架都可以实现。 1、核心代码 1.1 左侧菜单核心代码：也就三个普通的超链接，赋予了data-src属性，后面是对应的action地址 <dd class="main_left"&gt...
    layui左侧菜单右侧显示
    chenyidong521的博客
    10-26 7851
    首先下载编辑好的首页静态文件 看一下静态文件的分布 菜单页面加入如下html内容 静态文件地址进行改写 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <title>病例打印后台管理系统&l...
    实现layui左侧菜单右侧显示页面内容的静态文件
    10-26
    实现layui左侧菜单右侧显示页面内容的静态文件,可查看对应的教程地址
    layui实现2级菜单页面跳转_使用layui实现的左侧菜单栏以及动态操作tab项方法
    weixin_39907596的博客
    12-19 1629
    首先说一下左侧菜单栏这是一个最基本的左侧菜单栏，实现的过程很简单，官方的说明文档就有，但是我在导入layer.js之后，直接复制这段官方代码到我的编辑器上时，发现页面是这样的：发现，绑定属性的菜单并没有下拉选项，这个问题在我导入layer.all.js之后解决了，而且发现如果是在页面的最上方导入的话也没有下拉选项，只有在html代码下面导入，才可以显示 ，不知道是什么原因。下面说重点，动态操作ta...
    使用layui实现的左侧菜单栏以及动态操作tab项方法
    10-16
    在Layui中，左侧菜单通常通过“layui-nav”类实现，通过“layui-nav-item”可以定义每一个独立的菜单项，而菜单项下的子菜单则通过“layui-nav-child”类来添加。 动态操作Tab页签是界面设计中的一种常用交互方式，...
    php左侧导航右侧tab标签,使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果...
    weixin_39559333的博客
    03-21 755
    用了layui框架1.home.html主界面：首页后台管理角色管理账号管理© layui.com - 底部固定区域layui.use('element', function(){var $ = layui.jquery,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块//触发事件var active = {tabAdd: func...
    layui点击左侧导航栏在右侧body显示_微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）...
    weixin_39599342的博客
    11-23 767
    在商场项目中，一般都会有分类页面。分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图布局分析：<主盒子><左盒子></左盒子><右盒子></右盒子></主盒子>左盒子使用标准流右盒子使用绝对定位（top、right）wxml：<!--主盒子--> <view class="container"&...
    左侧二级菜单右侧对应切换内容tab
    05-27
    左侧二级菜单右侧对应切换内容tab 文件夹下 tab.html 文件
    点击左边列表在右边显示选项 多选 单选
    07-23
    左边一个列表（从数据库里读出的） 右边一个列表 你点击、双击 就可以将左边选中的 显示在右边。可以实现简单的单选 多选的问题。为了你能下载就能运行，所以我就弄了一个简单的列子 可以给你一些重要提示。希望能帮助你
    layui菜单列表不自动展开_新增页面点击展开菜单收起其它菜单功能 · Pull Request !4 · Mr.Chung/layui-mini - Gitee.com...
    weixin_39937447的博客
    12-23 1434
    index.html 文件var options = {iniUrl: "/initMenu", // 初始化接口clearUrl: "layuimini/api/clear.json", // 缓存清理接口urlHashLocation: false, // 是否打开hash定位bgColorDefault: false, // 主题默认配置multiModule: t...
    layui点击左侧导航栏在右侧body显示_Vue记账项目-导航栏
    weixin_39528366的博客
    11-23 971
    一、确定页面url#/money记账#/labels标签#/statistics统计默认进入#/money添加一个404页面添加代码router/index.ts添加router，配置4个路径对应组件初始化组件将router传给new Vue()在App组件里用<router-view/>给出router渲染区域添加路径初始化组件在App组件里用<router-view/>...
    详细设计一个文章页目录插件
    Yvette Lau的专栏
    10-20 558
    在说这个插件之前，可以先去 https://bubuzou.com/ 这个网站体验下这个插件的效果，好有个大概的印象。通过阅读这篇文章，你可以收获什么？用 JS 直接操作 DOM浏览器 ...
    LayUI 导航菜单异常，无法展开或者无法折叠
    liuhagen的专栏
    05-05 4968
    在自定义的菜单时，左侧的导航栏总是不正常折叠和展开，始终找不到原因。 经过对比正确的发现。 其中有过一个链接的href为空字符串。 将其默认值设置如下值。 a href="javascript:;" 此问题修复。 此问题经过很长一段时间，才被找到，再次做个记录。希望帮助到其他人。 ...
    Layui实现点击左侧导航栏菜单，在右侧内容生成对应的目录页，可右键删除所有页
    程序羊的博客
    03-19 1944
    在layui的后台管理页面上，通过jquery实现点击导航栏，呈现浏览器新打开页面的效果，并支持右键删除所有。详情请往下看。
    layui二级菜单（动态树形结构）
    weixin_67338832的博客
    07-14 961
    由图可见pid为-1为父级菜单，父级菜单的id与子菜单的pid相对应。构建的实体类要与表中的字段名保持一致。想要的效果图父目录下就是子目录。
    layui 二级联动菜单
    php菜鸟技术天地
    01-10 5415
    &lt;form class="layui-form" action="{empty name="id"}{:url('add')}{else /}{:url('edit')}{/empty}" method="post" enctype="multipart/form-data" &gt; &lt;div class="layui-form-item"
    <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <div class="layui-btn addContent" lay-active="addContent">添加创意包</div> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">创意包1</li> <li lay-id="2">创意包2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">标题1</li> <li lay-id="2">标题2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容-1</div> <div class="layui-tab-item">内容-2</div> </div> </div> </div> <div class="layui-tab-item">主体-2</div> </div> </div>优化一下代码
    最新发布
    06-03
    你可以将重复的代码抽取出来作为一个公共的HTML模板，然后在需要使用的地方引用即可，可以使代码更加简洁。 例如，你可以将创意包的tab页抽出作为公共的模板： ```html <!-- 创意包模板 --> <script type="text/html" id="tpl-creative"> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="{{d.id}}"> <ul class="layui-tab-title" style="width: 85%"> {{# layui.each(d.items, function(index, item){ }} <li {{ index === 0 ? 'class="layui-this"' : '' }} lay-id="{{ item.id }}">{{ item.title }}</li> {{# }); }} </ul> <div class="layui-tab-content"> {{# layui.each(d.items, function(index, item){ }} <div class="layui-tab-item {{ index === 0 ? 'layui-show' : '' }}">{{ item.content }}</div> {{# }); }} </div> </div> </script> <!-- 页面内容 --> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <div class="layui-btn addContent" lay-active="addContent">添加创意包</div> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">创意包1</li> <li lay-id="2">创意包2</li> </ul> <div class="layui-tab-content"> <!-- 引用创意包模板 --> {{# layui.laytpl($('#tpl-creative').html()).render({ id: 'creative1', items: [{ id: '1', title: '标题1', content: '内容-1' }, { id: '2', title: '标题2', content: '内容-2' }] }) }} </div> </div> ``` 在上面的代码中，我们将创意包的tab页抽取出来作为了一个公共的模板，可以通过laytpl模块来渲染模板并将结果插入到页面中。这样就可以避免重复的代码，使代码更加简洁。
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值