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 程序员？先过了下面这些问题！

    作者:rowkey https://zhuanlan.zhihu.com/p/31552882 一.数据结构与算法基础 说一下几种常见的排序算法和分别的复杂度. 用Java写一个冒泡排序算法 描述一下 ...

  2. MyEclipse中最常用的快捷键大全

    1. [ALT+/]    此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2. [C ...

  3. C# Winform Dev控件之TileControl

    tileControl 包含TileGroup TileGroup 包含 Tile Tile拖拽时代码 TilteControl的itemPress事件执行 或Tile的itemPress执行 Til ...

  4. 牛客练习赛48 D 小w的基站网络

    链接:https://ac.nowcoder.com/acm/contest/923/D来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语言52428 ...

  5. 2014 ACM-ICPC Vietnam National First Round

    Contest Link easy: ABDGIJ medium-easy: E medium: H medium-hard: CF A. Cool number 各数位之和不大,枚举即可. E. B ...

  6. python接口自动化（Cookie_绕过验证码登录）

     python接口自动化(Cookie_绕过验证码登录) 有些登录的接口会有验证码,例如:短信验证码,图形验证码等,这种登录的验证码参数可以从后台获取(或者最直接的可查数据库) 获取不到也没关系,可以 ...

  7. 用C#简单实现的36进制转换代码

    private const string initValue = "A0000001"; private static string cs = "0123456789AB ...

  8. react 使用触摸事件

    react开发支持的事件中,onClick事件,部分标签不支持点击,只能onTouchEnd,但是在移动端,手指触碰到事件绑定元素上,滑动,也会触发该事件,故来share解决办法,有更好的方法,欢迎评 ...

  9. Linux环境相关

    Linux环境相关 CentOS7网络配置静态ip CentOS7查看ip地址:以前是ifconfig,现在变成了 ip addr 当然这是配置好环境最后的结果,刚装好系统时时没有下面的ens33的相 ...

  10. Java中JNI的使用详解第四篇:C/C++中创建Java对象和String字符串对象及对字符串的操作方法

    首先来看一下C/C++中怎么创建Java对象:在JNIEnv中有两种方法是用来创建Java对象的: 第一种方法: jobject  NewObject(jclass clazz  , jmethodI ...