当页面打开单个tab时,操作栏显示:

当页面打开多个tab时,会发现操作栏与下面第一个tab显示的操作栏类型一样,并且操作栏的按钮无作用

第一个标签操作栏显示:

产生这样的原因:使用layui时,每个tab的jsp页面操作栏的代码中的id是一样的.

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="editEmp">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delEmp">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
<button class="layui-btn layui-btn-sm" lay-event="addEmp">添加管理员</button>
</div>
</script>

解决方法:就是把每个jsp中的操作栏id改成不一样的.

layui的选项卡(tab)的问题的更多相关文章

  1. 选项卡 tab切换

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容

    作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...

  3. layui超链接追加tab选项卡必须手动刷新才出现问题

    在admin.js中tabAdd方法里 var li = $("#WeTabTip li[lay-id=" + id + "]").length;中的id外面加 ...

  4. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  5. jq的选项卡tab

    jq中选项卡很简单,的注意是他结构命名(网上有很多,其中不乏不规范) 1.tab 2.tab-hd (选项栏) 3.tab-bd(选项栏对应的内容) css代码(布局没问题,可以只看jquery代码) ...

  6. jQuery插件学习之选项卡Tab

    在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...

  7. Mui 选项卡 tab 高度 没有自适应....

    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...

  8. layui中的tab切换

    tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...

  9. layui tabs选项卡 响应试不显示问题

    添加: var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块 element.init();

随机推荐

  1. bash arithmatic

    Arithmetic in bash is done with $ and double parentheses: echo "$(($num1+$num2))" Or $ and ...

  2. centos 7 安装mysql5.7

    1.进入到要存放安装包的位置 cd /home/lnmp 2.查看系统中是否已安装 MySQL 服务,以下提供两种方式: rpm -qa | grep mysql yum list installed ...

  3. Eureka 系列(05)消息广播(上):消息广播原理分析

    Eureka 系列(05)消息广播(上):消息广播原理分析 [TOC] 0. Spring Cloud 系列目录 - Eureka 篇 首先回顾一下客户端服务发现的流程,在上一篇 Eureka 系列( ...

  4. 一份详尽的 Java 问题排查工具清单,值得收藏!

    | grep 5 -A 3    #上匹配seq 10 | grep 5 -B 3    #下匹配seq 10 | grep 5 -C 3    #上下匹配,平时用这个就妥了cat f.txt | g ...

  5. zabbix--External checks 外部命令检测

    概述zabbix server 运行脚本或者二进制文件来执行外部检测,外部检测不需要在被监控端运行任何 agentditem key 语法如下: 参数 定义 script shell 脚本或者二进制文 ...

  6. LeetCode Array Easy 122. Best Time to Buy and Sell Stock II

    Description Say you have an array for which the ith element is the price of a given stock on day i. ...

  7. celery使用的小记录

    一篇还不错的入门说明: http://www.bjhee.com/celery.html, 官方文档: http://docs.jinkan.org/docs/celery/getting-start ...

  8. 使用 Audacity 录制声卡声音

    在Linux中使用 Audacity 录制电脑播放的声音非常简单,其实主要设置不在 Audacity 上,而是要设置好输入设备并选择对录音输入源. 首先确认输入设备中 内置音频的Monitor 没有被 ...

  9. sql中char,varchar,nvarchar的区别

    char[n] 是定长的,也就是当存储字符小于n时,他会自动补齐(补空值).优点:效率较varchar高. varchar[n]是变长且非unicode字符数据类型,n的取值在1到8000之间,该类型 ...

  10. {"timestamp":"2019-11-12T02:39:28.949+0000","status":415,"error":"Unsupported Media Type","message":"Content type 'text/plain;charset=UTF-8' not supported","path":&quo

    在Jmeter运行http请求时报错: {"timestamp":"2019-11-12T02:39:28.949+0000","status&quo ...