LayUI之动态选项卡&&iframe的使用

最新推荐文章于 2024-06-19 11:31:39 发布

_Leaf1217

最新推荐文章于 2024-06-19 11:31:39 发布

阅读量286

点赞数

分类专栏： LayUI 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_63492318/article/details/125869196

版权

本文介绍了如何使用LayUI实现动态添加选项卡并配合iframe展示页面内容。从前言开始，逐步讲解了选项卡的静态代码、动态添加选项卡的js编写与引入，以及在内容区域加入lay-filter属性来完善功能。通过测试和调整，成功解决了重复创建选项卡和选项卡名称问题。

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

一、前言

二、动态添加选项卡

三、完善动态选项卡

一、前言

1. 前言

在上篇文章我们一起利用LayUI实现了动态的左侧菜单栏数据，可是却还没有实现点击菜单建立选项卡并且跳转页面，而这篇文章就让我们一起来实现一波吧！

1.2 选项卡页面静态代码

我们首先在LayUI官网上找到选项卡相关的静态代码放上去：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入LayUI -->
<%@ include file="/common/header.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">

</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