登录
当前位置： 首页 > 编程笔记 >

layui选项卡效果实现代码

谷出野
2023-03-14
本文向大家介绍layui选项卡效果实现代码，包括了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>

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

<div 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>
 <div class="layui-tab-content">
  <div class="layui-tab-item layui-show">内容1</div>
  <div class="layui-tab-item">内容2</div>
  <div class="layui-tab-item">内容3</div>
  <div class="layui-tab-item">内容4</div>
  <div class="layui-tab-item">内容5</div>
 </div>
</div>
<div 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>
</div>

<!-- 通用-970*90 -->
<div>
 <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>Hash地址定位</legend>
</fieldset>
<div 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>
 <div class="layui-tab-content">
  <div class="layui-tab-item layui-show">
   点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
  </div>
  <div class="layui-tab-item">内容2</div>
  <div class="layui-tab-item">内容3</div>
  <div class="layui-tab-item">内容4</div>
  <div class="layui-tab-item">内容5</div>
 </div>
</div>

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

<div 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>
 <div class="layui-tab-content" style="height: 100px;">
  <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>
  <div class="layui-tab-item">内容2</div>
  <div class="layui-tab-item">内容3</div>
  <div class="layui-tab-item">内容4</div>
  <div class="layui-tab-item">内容5</div>
 </div>
</div>

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

<div 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>
 <div class="layui-tab-content" style="height: 100px;">
  <div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>
  <div class="layui-tab-item">2</div>
  <div class="layui-tab-item">3</div>
  <div class="layui-tab-item">4</div>
  <div class="layui-tab-item">5</div>
  <div class="layui-tab-item">6</div>
 </div>
</div>

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

<div 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>
 <div class="layui-tab-content" style="height: 100px;">
  <div class="layui-tab-item layui-show">
   1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。
   <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。
  </div>
  <div class="layui-tab-item">2</div>
  <div class="layui-tab-item">3</div>
  <div class="layui-tab-item">4</div>
  <div class="layui-tab-item">5</div>
  <div class="layui-tab-item">6</div>
 </div>
</div>

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

<div 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>
 <div class="layui-tab-content" style="height: 150px;">
  <div class="layui-tab-item layui-show">
   1. 我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例
   2. 删除功能适用于所有风格
  </div>
  <div class="layui-tab-item">2</div>
  <div class="layui-tab-item">3</div>
  <div class="layui-tab-item">4</div>
  <div class="layui-tab-item">5</div>
  <div class="layui-tab-item">6</div>
 </div>
</div>

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

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


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

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

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

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

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

效果图：

官网Tab

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

 类似资料：
  • vue实现选项卡及选项卡切换效果

    本文向大家介绍vue实现选项卡及选项卡切换效果，包括了vue实现选项卡及选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍，既然是从入门到实战，我直接将平时项目中需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查，再回过头来看我的实现代码。记住，通读Vue文档真的很重要，很重要！ 这里的V

  • layui分页效果实现代码

    本文向大家介绍layui分页效果实现代码，包括了layui分页效果实现代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了layui分页效果的具体代码，供大家参考，具体内容如下 效果图： 官网分页 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • iOS实现选项卡效果的方法

    本文向大家介绍iOS实现选项卡效果的方法，包括了iOS实现选项卡效果的方法的使用技巧和注意事项，需要的朋友参考一下 先来看看实现效果： 控件是如何使用的 添加LMJTabDelegate代理 代理函数 LMJTab介绍： 总结 以上就是这篇文章的全部内容了，希望能对各位iOS开发者们有所帮助，如果有疑问大家可以留言交流。

  • 微信小程序 实现tabs选项卡效果实例代码

    本文向大家介绍微信小程序 实现tabs选项卡效果实例代码，包括了微信小程序 实现tabs选项卡效果实例代码的使用技巧和注意事项，需要的朋友参考一下 最近微信应用号是炒的如火如荼，热门满满，但是也可以发现搜索关键词出来，各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮，这几天先把小程序技术文档看了个遍，就直接着手写案例了。很多组件微信内部已经封装完了，正好发现没有tab选项卡效果，这两天正好

  • Android利用Fragment实现Tab选项卡效果

    本文向大家介绍Android利用Fragment实现Tab选项卡效果，包括了Android利用Fragment实现Tab选项卡效果的使用技巧和注意事项，需要的朋友参考一下 利用Fragment实现Tab选项卡效果： 将RadioGroup与Fragment集合，实现tab选项卡效果，这里面最关键的几个文件： 1.FragmentTabAdapter类： 2.activity_main.xml布局文

  • jQuery实现tab选项卡效果的方法

    本文向大家介绍jQuery实现tab选项卡效果的方法，包括了jQuery实现tab选项卡效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现tab选项卡效果的方法。分享给大家供大家参考。具体如下： html部分如下： 希望本文所述对大家的jquery程序设计有所帮助。

相关阅读

Android利用Fragment实现Tab选项卡效果jQuery实现tab选项卡效果的方法轻松实现jquery选项卡切换效果微信开发 js实现tabs选项卡效果jQuery简单实现tab选项卡切换效果

相关文章

JOGL 灯光效果JOGL 旋转效果JOGL 缩放效果实战-Swing实现在线考试项目小红书实习效果广告运营面经

相关问答

primefaces选项卡使用动态选项卡查看不同的选项卡内容打开嵌套选项卡时关闭选项卡PrimeFaces选项卡视图-调整选项卡宽度单击选项卡项来自下一个选项卡项的响应ionic 5-在现有项目中创建选项卡

相关工具

选项卡滑动效果读取txt并实现翻页效果瀑布效果，不同的实现方式layui活字格 - layUI日期选择插件

相关文档

CSS Buttons 按钮效果认识现代 WebGIS现代 JavaScript 教程现代 OpenGL 教程常见 Web 特效实践
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.