Layui之动态选项卡和iframe的使用

最新推荐文章于 2023-07-13 12:57:10 发布

荣荣荣荣.

最新推荐文章于 2023-07-13 12:57:10 发布

阅读量973

点赞数 1

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/m0_65774688/article/details/125869706

版权

本文详细介绍了如何使用Layui框架创建动态选项卡，包括动态添加选项卡、将选项卡名称替换为菜单名、避免重复选项卡、选项卡选中逻辑以及利用iframe实现页面跳转。同时，文章还涉及了登录功能的后台和前台实现，包括用户实体、工具类、DAO层以及前端登录界面的设计。

摘要由CSDN通过智能技术生成

一、动态选项卡

1、选项卡

首先我们可以再官网查看选项卡页面布局代码，从官网上复制自己所需

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="common/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="static/js/index.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">会议OA项目</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
     
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
		<div class="layui-tab" lay-filter="demo"  lay-allowClose="true">
		  <ul class="layui-tab-title">
		    <li class="" lay-id="11">首页</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">1</div>
		  </div>
		</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
</body>
</html>

把选项卡代码放在内容主题区域