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. Unity Shader后处理-搜索灰度效果

    如U3D中Hierarchy面板下的搜索效果: 讲解分析: 1.这种PostEffect效果其实就是指Unity shader的后处理,即游戏中实现屏幕特效的常见方法.顾名思义屏幕后处理就是指在渲染完 ...

  2. Linux特殊位SUID、SGID、SBIT

    Linux特殊位SUID.SGID.SBIT 前言 Linux中的文件权限一般有x.w.r,在某个情况下有需要用到s.t,即特殊位. 进程运行时能够访问哪些资源或文件,不取决于进程文件的属主属组,而是 ...

  3. echart 柱状图背景色设置

    方法一: series: [ { name: '1', type: 'bar', itemStyle: {//柱图背景色 color: '#111' }, data: list }, { name: ...

  4. @value传值到static字段

    解决办法: 1.将这两个私有属性的set方法从私有变成公开(private -->>> public); 2.生成这两个静态属性的set方法: 3.将原来在静态属性上的@Value( ...

  5. umount - 卸载文件系统

    总览 umount [-hV] umount -a [-nrv] [-t vfstype] umount [-nrv] device | dir [...] 描述 umount 可以卸除当前挂载在文件 ...

  6. 预防定时重启apache服务没有起来的脚本

    内容如下: #!/bin/bash test=$(ps aux | grep httpd | grep -v grep) if [ -n "$test" ] then echo & ...

  7. 解决mac下，javac命令出现的乱码问题

    今天突然检查我的jdk安装,发现出现了乱码 一,出现乱码

  8. Java 的信号灯

    Semaphore可以维护当前访问自身的线程个数,并提供了同步机制.使用Semaphore可以控制同时访问资源的线程个数,例如,实现一个文件允许的并发访问数. Semaphore实现的功能就类似厕所有 ...

  9. laydate日期插件弹出闪退和多次闪退问题解决

    情况:点击第一个input 日期,可以正常选择日期,之后点击任何一个,都会闪一下然后消失,无法正常选择: 原因:lay-key的值的问题,需要循环重新为lay-key赋值 解决: <input ...

  10. Go 转义字符

    Go 转义字符 package main import "fmt" func main() { fmt.Printf("Hello\tWorld!") } 本文 ...