tab切换是常见的效果，为了方便经常使用插架中自带的，下面是layui中自带的tab切换效果，

主要代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>layui--tab切换</title>

    <link rel="stylesheet" href="../layui/css/layui.css">

</head>

<body>

    <!-- tab切换 -->

    <div class="layui-tab layui-tab-card" lay-filter="demo">

      <ul class="layui-tab-title">

        <li class="layui-this">日常设置</li>

        <li>自由设置</li>

      </ul>

      <div class="layui-tab-content" style="height: 100px;">

        <div class="layui-tab-item layui-show">

            <!-- 日常作业 -->

            <div>

                <span></span>

                <button class="www">提交</button>

            </div>

        </div>

        <div class="layui-tab-item">

            <!-- 自由批阅 -->

            <div>

                <span></span>

                <button class="www2">提交</button>

            </div>

        </div>

      </div>

    </div>

</body>

<script src="../js/jquery-2.1.0.js"></script>

<script src="../layui/layui.js"></script>

<script>

    layui.use(['element','layer'], function(){

          var element = layui.element,

              layer = layui.layer;

         //一些事件监听

        element.on('tab(demo)', function(data){

            // console.log(data.index); //得到当前Tab的所在下标

            if (data.index == ) {

                console.log('日常设置');

                // searchCon(pageNum, pageSize,gradeId,subjectId);

                testSearch();

            }else if(data.index == ){

                console.log('自由设置');

                getMarkingStatistics();

            }

        });

        /**

        *日常设置中的点击事件

        */

        $('.www,.www2').click(function() {

            layer.msg();

        });

        /**

        *日常设置函数

        */

        function testSearch(){

            console.log('我是日常设置')

        }

        /**

        *自由设置统计

        */

        function getMarkingStatistics(){

            console.log('我是自由设置')

        }

    });

</script>

</html>

layui中的tab切换的更多相关文章

  1. element UI中的tab切换栏

    html代码:(用的是el-tab组件) <el-tabs v-model="activeIndex" type="border-card" @tab-c ...

  2. jquery中简易tab切换

    <!doctype html> <html> <head> <title>test</title> <meta content=&qu ...

  3. Vue如何tab切换高亮最简易方法

    以往我们实现tab切换高亮通常是循环遍历先把所有的字体颜色改变为默认样式,再点亮当前点击的选项,而我们在vue框架中实现tab切换高亮显示并不需要如此,只需要将当前点击选项的index传入给一个变量, ...

  4. 修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...

  5. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  6. bootstrap中tab切换的使用

    文档地址:https://v3.bootcss.com/javascript/#tabs 简单实例: <!DOCTYPE html> <html lang="en" ...

  7. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  8. tab切换中的滚动条下拉分页带来的问题

    相信做过tab切换中滚动条下拉分页的童鞋都知道,我们在用scroll方法来做滚动条下拉分页的时候,都是有bug,切换中间的内容会互相影响,为了解决这个问题,我总结了2种方法: 1.方法一: <! ...

  9. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. java-day26

    ## DOM简单学习:为了满足案例要求     * 功能:控制html文档的内容     * 获取页面标签(元素)对象:Element         * document.getElementByI ...

  2. Redis数据结构之跳跃表-skiplist

    在Redis中,zset是一个复合结构: 使用hash来存储value和score的映射关系 使用跳跃表来提供按照score进行排序的功能,同时可以指定score范围来获取value列表 结构 zse ...

  3. hdu 6437 /// 最小费用最大流 负花费 SPFA模板

    题目大意: 给定n,m,K,W 表示n个小时 m场电影(分为类型A.B) K个人 若某个人连续看了两场相同类型的电影则失去W 电影时间不能重叠 接下来给定m场电影的 s t w op 表示电影的 开始 ...

  4. ttytype - 终端设备映射的默认终端类型

    DESCRIPTION(描述) /etc/ttytype 文件把termcap/terminfo中的终端类型名与tty行关联起来.每行包括一种终端类型,后面跟着空格,然后是tty名(不带 /dev/ ...

  5. linux常用命令-3文件与目录相关命令

    cd .. #返回上一级目录 cd ../.. #返回上两级目录 cd - #返回上次所在目录 cp file1 file2 #将file1复制为file2 cp -a dir1 dir2 #复制一个 ...

  6. 实时监听input输入情况

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. CodeForces祝贺上紫

    还是靠手速了. 不少比赛,经常差几分钟/一个细节就能AC一道比较难的题目. 加油! P.S 只能当成休闲性质,不能再当成正业了.迈向科研...

  8. WPF RichTextBox 当前光标后一个字符是文档的第几个字符

    WPF RichTextBox 当前光标后一个字符是文档的第几个字符 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-05 参考: TextP ...

  9. Python语法学习记录之tuple该如何使用？

    一.介绍 dict 的用法比较简单,它可以存储任意值,并允许是不同类型的值,下面实例来说明: 下面例子中 a 是整数, b 是字符串, c 是数组,这个例子充分说明哈希数组的适用性. 每一个元素是pa ...

  10. NX二次开发-UFUN工程图表格注释写入文本内容UF_TABNOT_set_cell_text

    NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...