layui选项卡效果实现代码

程序员文章站 2022-06-12 23:15:36

本文实例为大家分享了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>

效果图：

layui选项卡效果实现代码

官网tab

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

上一篇：集成开发环境云云种种，你该何去何从？

下一篇： Caused by: java.lang.IllegalArgumentException: Mapped Statements collection does not contain value f

layui选项卡效果实现代码

使用C#实现在屏幕上画图效果的代码实例

iOS如何用100行代码实现简单的抽屉效果

Android 实现控件悬浮效果实例代码

iOS实现爆炸的粒子效果示例代码

iOS自动生成表格效果的实现代码

iOS开发之图片模糊效果的五种实现代码

iOS实现翻页效果动画实例代码

iOS实现选项卡效果的方法

iOS如何用100行代码实现简单的抽屉效果

C# WinForm实现Win7 Aero透明效果代码