延迟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. Ant的使用（一）

    <?xml version="1.0" encoding="UTF-8"?> <project name="projectName& ...

  2. Object 的wait()方法

    The java.lang.Object.wait() causes current thread to wait until another thread invokes the notify() ...

  3. 真实机中安装CentOS

    前言 最近在b站上看了兄弟连老师的Linux教程,非常适合入门:https://www.bilibili.com/video/BV1mW411i7Qf 看完后就自己来试着玩下,正好手上有台空闲的电脑就 ...

  4. dpkg:处理 xxx (--configure)时出错解决办法,也可用于卸载软件出错的情况

    dpkg:处理 xxx (--configure)时出错解决办法今早安装nfs时出现问题,找到该文,备份留用.然后在网上找到了这片文章,按步骤走就解决了,中间会提示自动卸载一下,执行那个命令就好了,我 ...

  5. ubuntu软件工具推荐

    时间:2019-04-11 记录:PangYuaner 标题:串口调试利器--Minicom配置及使用详解 地址:https://www.cnblogs.com/wonux/p/5897127.htm ...

  6. C++小坑汇总

    std::vector::end, 是构想的下一个push_back位置,并不实际指向vector中任何元素. Returns an iterator referring to the past-th ...

  7. GetX代码生成IDEA插件，超详细功能讲解（透过现象看本质）

    前言 本文章不是写getx框架的使用,而且其代码生成IDEA插件的功能讲解 我之前写过俩篇很长很长的getx文章 一篇入门使用:Flutter GetX使用---简洁的魅力! 一篇原理深度剖析:Flu ...

  8. ArcEngine+C# 森林资源仿真系统 核心代码

    目录 第一章 基础功能的核心代码 实现滚轮缩放事件 创建或获取地理数据(导入前询问用户是否覆盖) 创建要素类(Shape) 点列数据创建要素类 Shape文件创建要素类 GDB中取出要素类 创建栅格数 ...

  9. 【SpringMVC】视图

    SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户 SpringMVC视图的种类很多,默认有转发视图和重定向视图 当工程引入jstl的依赖,转发视图会自动 ...

  10. Appium自动化（11） - 详解 Applications 类里的方法和源码解析

    如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 Applications 类 ...