layui选项卡效果实现代码分享-js教程-PHP中文网

首页

web前端

js教程

layui选项卡效果实现代码分享

小云云

May 21, 2018 am 09:05 AM

layui 代码实现

本文主要为大家详细介绍了layui弹出层效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link rel="stylesheet" href="layui/css/layui.css">
  </head>
  <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
 <legend>默认风格的Tab</legend>
</fieldset>

<p class="layui-tab">
 <ul class="layui-tab-title">
  <li class="layui-this">网站设置</li>
  <li>用户管理</li>
  <li>权限分配</li>
  <li>商品管理</li>
  <li>订单管理</li>
 </ul>
 <p class="layui-tab-content">
  <p class="layui-tab-item layui-show">
   1. 高度默认自适应，也可以随意固宽。
   <br>2. Tab进行了响应式处理，所以无需担心数量多少。
  </p>
  <p class="layui-tab-item">内容2</p>
  <p class="layui-tab-item">内容3</p>
  <p class="layui-tab-item">内容4</p>
  <p class="layui-tab-item">内容5</p>
 </p>
</p>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>动态操作Tab</legend>
</fieldset>

<p class="layui-tab" lay-filter="demo" lay-allowclose="true">
 <ul class="layui-tab-title">
  <li class="layui-this" lay-id="11">网站设置</li>
  <li lay-id="22">用户管理</li>
  <li lay-id="33">权限分配</li>
  <li lay-id="44">商品管理</li>
  <li lay-id="55">订单管理</li>
 </ul>
 <p class="layui-tab-content">
  <p class="layui-tab-item layui-show">内容1</p>
  <p class="layui-tab-item">内容2</p>
  <p class="layui-tab-item">内容3</p>
  <p class="layui-tab-item">内容4</p>
  <p class="layui-tab-item">内容5</p>
 </p>
</p>
<p class="site-demo-button" style="margin-bottom: 0;">
 <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
 <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
 <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>
</p>

<!-- 通用-970*90 -->
<p>
 <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>
</p>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>Hash地址定位</legend>
</fieldset>
<p class="layui-tab" lay-filter="test">
 <ul class="layui-tab-title">
  <li class="layui-this" lay-id="11">网站设置</li>
  <li lay-id="22">用户管理</li>
  <li lay-id="33">权限分配</li>
  <li lay-id="44">商品管理</li>
  <li lay-id="55">订单管理</li>
 </ul>
 <p class="layui-tab-content">
  <p class="layui-tab-item layui-show">
   点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
  </p>
  <p class="layui-tab-item">内容2</p>
  <p class="layui-tab-item">内容3</p>
  <p class="layui-tab-item">内容4</p>
  <p class="layui-tab-item">内容5</p>
 </p>
</p>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>简洁风格的Tab</legend>
</fieldset>

<p class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
 <ul class="layui-tab-title">
  <li class="layui-this">网站设置</li>
  <li>用户管理</li>
  <li>权限分配</li>
  <li>商品管理</li>
  <li>订单管理</li>
 </ul>
 <p class="layui-tab-content" style="height: 100px;">
  <p class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</p>
  <p class="layui-tab-item">内容2</p>
  <p class="layui-tab-item">内容3</p>
  <p class="layui-tab-item">内容4</p>
  <p class="layui-tab-item">内容5</p>
 </p>
</p>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>卡片风格的Tab</legend>
</fieldset>

<p class="layui-tab layui-tab-card">
 <ul class="layui-tab-title">
  <li class="layui-this">网站设置</li>
  <li>用户管理</li>
  <li>权限分配</li>
  <li>商品管理</li>
  <li>订单管理</li>
 </ul>
 <p class="layui-tab-content" style="height: 100px;">
  <p class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</p>
  <p class="layui-tab-item">2</p>
  <p class="layui-tab-item">3</p>
  <p class="layui-tab-item">4</p>
  <p class="layui-tab-item">5</p>
  <p class="layui-tab-item">6</p>
 </p>
</p>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>当Tab数超过一定宽度</legend>
</fieldset>

<p class="layui-tab layui-tab-card" style="width: 290px;">
 <ul class="layui-tab-title">
  <li class="layui-this">网站设置</li>
  <li>用户管理</li>
  <li>权限分配</li>
  <li>商品管理</li>
  <li>订单管理</li>
 </ul>
 <p class="layui-tab-content" style="height: 100px;">
  <p class="layui-tab-item layui-show">
   1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。
   <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。
  </p>
  <p class="layui-tab-item">2</p>
  <p class="layui-tab-item">3</p>
  <p class="layui-tab-item">4</p>
  <p class="layui-tab-item">5</p>
  <p class="layui-tab-item">6</p>
 </p>
</p>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>带删除功能的Tab</legend>
</fieldset>

<p class="layui-tab layui-tab-card" lay-allowclose="true">
 <ul class="layui-tab-title">
  <li class="layui-this">网站设置</li>
  <li>用户基本管理</li>
  <li>权限分配</li>
  <li>商品管理</li>
  <li>订单管理</li>
 </ul>
 <p class="layui-tab-content" style="height: 150px;">
  <p class="layui-tab-item layui-show">
   1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例
   2. 删除功能适用于所有风格
  </p>
  <p class="layui-tab-item">2</p>
  <p class="layui-tab-item">3</p>
  <p class="layui-tab-item">4</p>
  <p class="layui-tab-item">5</p>
  <p class="layui-tab-item">6</p>
 </p>
</p>

<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use(&#39;element&#39;, function(){
 var $ = layui.jquery
 ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块

 //触发事件
 var active = {
  tabAdd: function(){
   //新增一个Tab项
   element.tabAdd(&#39;demo&#39;, {
    title: &#39;新选项&#39;+ (Math.random()*1000|0) //用于演示
    ,content: &#39;内容&#39;+ (Math.random()*1000|0)
    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
   })
  }
  ,tabDelete: function(othis){
   //删除指定Tab项
   element.tabDelete(&#39;demo&#39;, &#39;44&#39;); //删除：“商品管理”


   othis.addClass(&#39;layui-btn-disabled&#39;);
  }
  ,tabChange: function(){
   //切换到指定Tab项
   element.tabChange(&#39;demo&#39;, &#39;22&#39;); //切换到：用户管理
  }
 };

 $(&#39;.site-demo-active&#39;).on(&#39;click&#39;, function(){
  var othis = $(this), type = othis.data(&#39;type&#39;);
  active[type] ? active[type].call(this, othis) : &#39;&#39;;
 });

 //Hash地址的定位
 var layid = location.hash.replace(/^#test=/, &#39;&#39;);
 element.tabChange(&#39;test&#39;, layid);

 element.on(&#39;tab(test)&#39;, function(elem){
  location.hash = &#39;test=&#39;+ $(this).attr(&#39;lay-id&#39;);
 });

});
</script>
  </body>
</html>

登录后复制

效果图：

热AI工具

热工具

热门话题

Java教程

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1277

C# 教程

1256

显示更多

Related knowledge

layui怎么获取表单数据 Apr 04, 2024 am 03:39 AM

layui 提供了多种获取表单数据的方法，包括直接获取表单所有字段数据、获取单个表单元素值、使用 formAPI.getVal() 方法获取指定字段值、将表单数据序列化并作为 AJAX 请求参数，以及监听表单提交事件获取数据。

layui登陆页面怎么设置跳转 Apr 04, 2024 am 03:12 AM

layui 登录页面跳转设置步骤：添加跳转代码：在登录表单提交按钮点击事件中添加判断，成功登录后通过 window.location.href 跳转到指定页面。修改 form 配置：在 lay-filter="login" 的 form 元素中添加 hidden 输入字段，name 为 "redirect"，value 为目标页面地址。

如何在华为手机上实现微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视，微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号，方便管理和使用。在华为手机上实现微信分身功能并不困难，只需要按照以下步骤操作即可。第一步：确保手机系统版本和微信版本符合要求首先，确保你的华为手机系统版本已更新到最新版本，以及微信App

layui跟vue有啥区别 Apr 04, 2024 am 03:54 AM

layui与Vue的区别主要体现在功能和关注点上。layui专注于快速开发UI元素，提供预制组件简化页面构建；而Vue是一个全栈框架，注重数据绑定、组件化开发和状态管理，更适合构建复杂应用程序。 layui学习简单，适合快速构建页面；Vue学习曲线陡峭，但有助于构建可扩展和易维护的应用程序。根据项目需求和开发者技能水平，可以选择合适的框架。

layui如何实现自适应 Apr 26, 2024 am 03:00 AM

通过使用layui框架的响应式布局功能，可以实现自适应布局。步骤包括：引用layui框架。定义自适应布局容器，设置layui-container类。使用响应式断点（xs/sm/md/lg）隐藏特定断点下的元素。利用网格系统（layui-col-）指定元素宽度。通过偏移量（layui-offset-）创建间距。使用响应式实用工具（layui-invisible/show/block/inline）控制元素的可见性和显示方式。

清华大学与智谱AI重磅开源 GLM-4：掀起自然语言处理新革命 Jun 12, 2024 pm 08:38 PM

自2023年3月14日开始，ChatGLM-6B以来，GLM系列模型受到了广泛的关注和认可。特别是在ChatGLM3-6B开源之后，开发者对智谱AI推出的第四代模型充满了期待。而这一期待，随着GLM-4-9B的发布，终于得到了充分的满足。GLM-4-9B的诞生为了赋予小模型（10B及以下）更加强大的能力，GLM技术团队经过近半年的探索，推出了这一全新的第四代GLM系列开源模型：GLM-4-9B。这一模型在保证精度的同时，大幅度压缩了模型大小，具有更快的推理速度和更高的效率。GLM技术团队的探索没

layui框架是什么语言 Apr 04, 2024 am 04:39 AM

layui框架是一款基于JavaScript的前端框架，提供了一套易用的UI组件和工具，帮助开发者快速构建响应式Web应用。其特点包括：模块化、轻量级、响应式，并拥有完善的文档和社区支持。layui广泛应用于管理后台系统、电商网站和移动端应用等开发中。优点在于上手快、提高效率、维护方便，缺点是定制性较差、技术更新较慢。

layui是什么意思啊 Apr 04, 2024 am 04:33 AM

layui是一个前端UI框架，它提供了丰富的UI组件、工具和功能，帮助开发人员快速构建现代化、响应式和交互式Web应用程序，特点包括：灵活轻量、模块化设计、丰富的组件、强大的工具和易于定制。它广泛应用于各种Web应用程序的开发中，包括管理系统、电商平台、内容管理系统、社交网络和移动端应用。

See all articles

layui选项卡效果实现代码分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题