延迟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. 输入npm install 报错node-sass@4.13.0 postinstall:`node scripts/build.js` Failed at the node-sass@4.13.0

    这个是因为sass安装时获取源的问题,先修改sass安装的源,再运行npm install就成功了 npm config set sass_binary_site=https://npm.taobao ...

  2. servlet中servletContext的五大作用（四）

    1.    获取web的上下文路径 2.    获取全局的参数 3.    作为域对象使用 4.    请求转发 5.    读取web项目的资源文件 package day10.about_serv ...

  3. linux 常用命令(一)——查看硬盘空间-内存-线程的cpu负载-线程内存

    系统参数检查: df -h [enter] 检查硬盘空间 TIP: 使用 man df 可查看该命令使用说明 ; q 退出. free检查内存使用情况: free [enter] TIP: 使用 ma ...

  4. 移动端常用单位——rem

    移动端常用单位: ①px:像素大小,固定值 ②%:百分比 ③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位) ④r ...

  5. linux centos7 移动文件到指定目录

    2021-08-26 在 centos7 环境下怎么移动一个文件到其他的目录下呢? 使用命令  mv 文件名 指定目录  即可完成该操作. 那么怎么将一个文件夹下的内容移动到另一个文件夹下呢?比如有时 ...

  6. Linux centos7 scp命令

    1. 命令简介 scp(secure copy) 是 linux 系统下基于 ssh 登陆进行安全的远程文件拷贝命令,可以在两台 Linux 主机进行复制操作 # 语法 scp [-1246BCpqr ...

  7. 第17章-x86-64寄存器

    不同的CPU都能够解释的机器语言的体系称为指令集架构(ISA,Instruction Set Architecture),也可以称为指令集(instruction set).Intel将x86系列CP ...

  8. C# 给PPT中的图表添加趋势线

    本文内容分享通过C#程序代码给PPT文档中的图表添加数据趋势线的方法. 支持趋势线的图表类型包括二维面积图.条形图.柱形图.柱形图.股价图.xy (散点图) 和气泡图中:不能向三维.堆积.雷达图.饼图 ...

  9. HZ游记

    HZ 游记 Day -1 收拾东西,准备出发. 话说这几天一直比较懒,也没什么心情和效率学习,颓废好几天了,希望到衡水以后能感觉好点. 不知道衡水有没有妹子 非常想看看衡水的样子,但是又害怕封闭式教学 ...

  10. Git 学习路线

    前言 感觉 Git 还是很重要,应该单独开一篇文章来讲 Git... 使用系列教程 Git 系列教程(1)- Git 简介 Git 系列教程(2)- Git 安装 Git 系列教程(3)- 初次运行 ...