延迟Tab切换，使用css中的flex布局，原生js实现。（京东首页菜单也有此延迟功能哦！）

　　每天进步一丢丢~~

　　

1、延迟Tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>延迟菜单</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            font-size: 14px;

        }

        li {

            list-style: none;

        }

        a {

            text-decoration: none;

        }

        .container {

            width: 1000px;

            height: 600px;

            margin: 0 auto;

            border: thin solid #000;

            overflow: hidden;

        }

        .container .nav {

            width: 100%;

            height: 40px;

            line-height: 40px;

        }

        .container .nav ul {

            display: flex;

            flex-flow: row nowrap;

            justify-content: space-around;

            background: #2b2b2b;

        }

        .container .nav ul li {

            width: 200px;

            border-right: thin solid #ddd;

            text-align: center;

        }

        .container .nav ul li:last-child {

            border-right: none;

        }

        .container .nav li a {

            color: #fff;

            display: inline-block;

            width: 200px;

            height: 40px;

        }

        .active {

            background: rgb(99, 3, 3);;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="nav">

            <ul id="list">

                <li class="active"><a href="#">首页</a></li>

                <li><a href="#">年度旅游</a></li>

                <li><a href="#">通知公告</a></li>

                <li><a href="#">企业文化</a></li>

                <li><a href="#">联系我们</a></li>

            </ul>

        </div>

        <div class="content" id="content">

            <div class="mode">首页</div>

            <div class="mode" style="display: none;">年度旅游</div>

            <div class="mode" style="display: none;">通知公告</div>

            <div class="mode" style="display: none;">企业文化</div>

            <div class="mode" style="display: none;">联系我们</div>

        </div>

    </div>

    <script>

        window.onload = function(){

            var lis = $id('list').getElementsByTagName('li');

            var modes = $id('content').getElementsByClassName('mode');

            var timer = null;

            if(lis.length !== modes.length){

                return;

            }

            for(var i=0; i<lis.length; i++){

                lis[i].id = i;

                lis[i].onmouseover = function(){

                    var that = this;

                    if(timer){

                        clearTimeout(timer);

                        timer = null;

                    }

                    timer = setTimeout(function(){

                        for(var j=0; j<lis.length; j++){

                        lis[j].className = '';

                        modes[j].style.display = 'none';

                    }

                    lis[that.id].className = 'active';

                    modes[that.id].style.display = 'block';

                    }, 500);

                };

            }

        };

        function $id(id){

            return typeof id === 'string' ? document.getElementById(id) : id;

        }

    </script>

</body>

</html>

2、自动Tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自动切换tab</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        li {

            list-style: none;

        }

        a {

            text-decoration: none;

            color: #fff;

        }

        .container  {

            width: 1000px;

            height: 360px;

            margin: 0 auto;

            border: thin solid #d5d5d5;

        }

        .container .nav {

            width: 100%;

            height: 40px;

            line-height: 40px;

            background: #2b2b2b;

        }

        .container .nav ul {

            display: flex;

            flex-flow: row nowrap;

            justify-content: space-around;

        }

        .container .nav ul li {

            border-right: thin solid #eee;

            width: 199px;

            text-align: center;

        }

        .container .nav ul li:last-child {

            border-right: none;

        }

        .container .nav ul li a {

            display: inline-block;

            width: 100%;

        }

        .content {

            height: 320px;

            line-height: 320px;

            text-align: center;

            font-size: 22px;

            font-weight: 700;

        }

        .active {

            background: rgba(121, 16, 24, 0.93);

        }

    </style>

</head>

<body>

<div class="container">

    <div class="nav">

        <ul id="list">

            <li class="active"><a href="#">整装设计</a></li>

            <li><a href="#">家具馆</a></li>

            <li><a href="#">建材馆</a></li>

            <li><a href="#">灯饰馆</a></li>

            <li><a href="#">定制馆</a></li>

        </ul>

    </div>

    <div class="content" id="content">

        <div class="mode">整装设计</div>

        <div class="mode" style="display: none;">家具馆</div>

        <div class="mode" style="display: none;">建材馆</div>

        <div class="mode" style="display: none;">灯饰馆</div>

        <div class="mode" style="display: none;">定制馆</div>

    </div>

</div>

<script>

    window.onload = function(){

        var lis = $id('list').getElementsByTagName('li');

        var modes = $id('content').getElementsByClassName('mode');

        var timer = null;

        var index = 0;

        if(lis.length !== modes.length){

            return;

        }

        changeIndex();

        for(var j=0; j<lis.length; j++){

            lis[j].id = j;
            //鼠标移入时，清除定时器，当前盒子高亮

            lis[j].onmouseover = function(){

                clearInterval(timer);

                box(this.id);

            };
            //鼠标移出时，启动定时器，继续自动切换盒子

            lis[j].onmouseout = function(){

                changeIndex();

            };

        }

        function changeIndex(){

            timer = setInterval(function(){

                index ++;

                if(index >= lis.length){

                    index = 0;

                }

                box(index);

            },2000);

        }

        function box(currentIndex){

            for(var k=0; k<lis.length; k++){

                lis[k].className = '';

                modes[k].style.display = 'none';

            }

            lis[currentIndex].className = 'active';

            modes[currentIndex].style.display = 'block';
            //重置索引为鼠标移入时的盒子

            index = currentIndex;

        }

    };

    function $id(id){

        return typeof id === 'string' ? document.getElementById(id) : id;

    }

</script>

</body>

</html>

简单Tab切换的更多相关文章

  1. 超简单TAB切换

    <div class="tab-fbox2"> <ul class="title-list2 clearfix"> <li cla ...

  2. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  3. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  4. 简单的Tab切换组件

    由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...

  5. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  6. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  7. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  9. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

随机推荐

  1. "排序二叉树"之探幽

    /*怎么理解排序二叉树呢?在二叉树的基本定义上增加两个基本条件: (1)所有左子树的节点数值都小于此节点的数值: (2)所有右节点的数值都大于此节点的数值. */ 1 /*************** ...

  2. linux————mysql————修改密码

    SET PASSWORD FOR 'root'@'localhost' = PASSWORD('输入新密码');

  3. reids在linux上的安装《四》

    linux 安装redis 完整步骤 红色字体在我的Centos上没有设置,因为我设置了密码 安装: 1.获取redis资源 wget http://download.redis.io/release ...

  4. 🏆【JVM技术专区】「难点-核心-遗漏」TLAB内存分配+锁的碰撞（技术串烧）！

    JVM内存分配及申请过程 当使用new关键字或者其他任何方式进行创建一个类的对象时,JVM虚拟机需要为该对象分配内存空间,而对象的大小在类加载完成后已经确定了,所以分配内存只需要在Java堆中划分出一 ...

  5. 本地yum源搭建

    2021/07/15 1.挂载 # 创建挂载目录 mkdir /mnt/cdrom # 挂载 mount -t iso9660 /dev/cdrom /mnt/cdrom 2.修改 yum 源配置# ...

  6. WEB漏洞——XXE

    XXE漏洞又称XML外部实体注入(XML External Entity) 介绍XXE漏洞前先说一下什么是XML XML语言 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据定义数据类 ...

  7. 优化技术专题-线程间的高性能消息框架-深入浅出Disruptor的使用和原理

    前提概要 简单回顾 jdk 里的队列: 阻塞队列: ArrayBlockingQueue主要通过:数组(Object[])+ 计数器(count)+ ReetrantLock的Condition (n ...

  8. Python习题集（九）

    每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 已知一个数列:1. ...

  9. java 线程状态 详解

    线程被创建后,有一个生命周期,下图是线程的生命周期详解. java api java.lang.Thread.State 这个枚举中给出了六种线程状态,分别是: 线程状态 导致状态发生条件 NEW(新 ...

  10. sqlite数据库的基本用法及C语言的API接口简介

    ********************sqlite数据库******************** http://www.sqlite.org/c3ref/intro.html 1-- 安装数据库: ...