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. JUC源码分析-线程池篇（二）FutureTask

    JUC源码分析-线程池篇(二)FutureTask JDK5 之后提供了 Callable 和 Future 接口,通过它们就可以在任务执行完毕之后得到任务的执行结果.本文从源代码角度分析下具体的实现 ...

  2. 通过java api 读取sql 中数据（查询）

    配置文件:dbconfig.properties 里面的数据 jdbc.url.jwhat=jdbc\:mysql\://ip\:3306/laibadev?useUnicode\=true& ...

  3. idea中maven在install时出现一个问题

    Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test (default-test) on ...

  4. ASP.Net 第一天笔记 MVC 控制器与视图数据传递注意事项

    1.如果方法的参数的名称与表单元素Name属性的值一致的话,会自动填充 2.如果表单元素的Name属性与实体类型中属性一致,那么表单中的数据会自动赋值给实体中的属性 3.控制器中重载的方法 方法前上边 ...

  5. 2018-2-13-win10-UWP-动画

    title author date CreateTime categories win10 UWP 动画 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...

  6. Pregel Master

  7. CAS -- ABA问题的解决方案

    我们现在来说什么是ABA问题.假设内存中有一个值为A的变量,存储在地址V中. 此时有三个线程想使用CAS的方式更新这个变量的值,每个线程的执行时间有略微偏差.线程1和线程2已经获取当前值,线程3还未获 ...

  8. 关于元素的offsetHeight、line-htight

    最近在做一个自适应高度的加载时的瀑布效果,使用加载完毕后为其一个A容器设置style的高度的方式完成(原高度为0且超出部分裁剪),使用offsetHeight获取其子元素高度(所有子元素高度均相等), ...

  9. Ruby 数据类型

    Ruby 数据类型 本章节我们将为大家介绍 Ruby 的基本数据类型. Ruby支持的数据类型包括基本的Number.String.Ranges.Symbols,以及true.false和nil这几个 ...

  10. 揭秘！2周实现上云上市，阿里云SaaS上云工具包如何打造新云梯？

    提到“上云”,很多人会理解成上IaaS,比如买一些计算.存储和网络云产品,把自己的应用系统部署上去.这的确是通常意义的上云.但对SaaS而言,需要从产品.商业.服务,三个维度考虑SaaS伙伴和客户的痛 ...