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. Stack，ArrayDeque，LinkedList的区别

        本文首发于cartoon的博客     转载请注明出处:https://cartoonyu.github.io/cartoon-blog     这段时间把疯狂JAVA再看了一遍,发现Stac ...

  2. 关于kettle

    1.点spoon.bat无报错也不运行 可以运行一下spoonDebug.bat 查看一下spoondebug.txt日志 我遇到这个问题时 是给他分配的内存太多了 我的电脑只有2g 给果他给分了20 ...

  3. 面向连接的echo服务编程实例

    以下是echo_serv.c的源码,提供创建服务端,绑定套接字到本机IP的8080端口,当收到客户端发送的字符串就在屏幕上打印出来,并且把字符串发送给客户端 // echo_serv.c – gcc ...

  4. Summary 报告

    1.需要在添加一个名为summary report的监听器,跑完之后查看 Label:取样器/监听器名称 Samples :事务数量 Average:平均一个完成一个事务消耗的时间(平均响应时间) M ...

  5. webpack 配置之入门二（css 篇）

    在项目中我们通过 css 来美化页面,css 也成为了网站不可或缺的一部分,这章节主要介绍 webpack 处理 css 部分, 1.webpack 处理 css 在 webpack 中,我们通过 s ...

  6. 新项目UX设计0到1的正确开启方式

    无论是在BAT还是创业小公司,都随时可能接到从0开始的新项目,那么作为负责新项目的主设OR独立设计师,我们应该从何开启工作呢?

  7. OneDrive一直后台占用CPU的一种解决办法

    系统版本:Windows 7 ultimate x64 Onedrive版本:17.3.6998.0830 最近发现Onedrive一直在后台占用15%左右的CPU,很是觉得奇怪,网上的解决方案是删除 ...

  8. word embedding 精要整理

    word embedding 具体含义:词的实数向量化表示,可以通过向量相似性度量语义相似性,相似性原理是上下文的一致性 Embedding在数学上表示一个maping, f: X -> Y, ...

  9. NX二次开发-UFUN获取图层的状态UF_LAYER_ask_status

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> #include <uf_layer.h> UF_initialize ...

  10. Java-Class-@I：org.springframework.stereotype.Service

    ylbtech-Java-Class-@I:org.springframework.stereotype.Service 1.返回顶部   2.返回顶部 1. package com.ylbtech. ...