延迟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. Struts中整合的强大Ognl学习（一）

    测试使用了一个JavaBean的User,User中的Address单独封装再形成了一个JavaBean: 为了测试静态方法和静态变量调用,写了一个Util方法: 因为测试Ognl功能过多所以直接使用 ...

  2. JDBC基础篇（MYSQL）——通过JDBC连接数据库的三种方式

    package day01_jdbc; import java.sql.Connection; import java.sql.Driver; import java.sql.DriverManage ...

  3. 转：C语言自增自減问题总结

    C语言自增自減问题总结 在程序设计中,经常遇到"i=i+1"和"i=i-1"这两种极为常用的操作.C语言为这种操作提供了两个更为简洁的运算符,即++和--,分别 ...

  4. shiro加密流程

  5. 为何GRE可以封装组播报文而IPSEC却不行？

    Author       : Email         : vip_13031075266@163.com Date          : 2021.01.24 Copyright : 未经同意不得 ...

  6. uni-app 登录Abp VNexe并获取Token

    uni.request方式登录abp关键代码如下,因abp获取token需要用formdata方式请求所以需要加上请求头 const baseUrl = 'http://127.0.0.1:44323 ...

  7. JDBC管理事务

    一.事务概念:打包一起的多个步骤的业务操作,要么同事成功,要么同时失败,则需要用事务管理: 二.代码实现

  8. 一文了解Promise使用与实现

    前言 Promise 作为一个前端必备技能,不管是从项目应用还是面试,都应该对其有所了解与使用. 常常遇到的面试五连问: 说说你对 Promise 理解? Promise 的出现解决了什么问题? Pr ...

  9. 用python的pandas读取excel文件中的数据

    一.读取Excel文件   使用pandas的read_excel()方法,可通过文件路径直接读取.注意到,在一个excel文件中有多个sheet,因此,对excel文件的读取实际上是读取指定文件.并 ...

  10. 双非Java的学习之旅以及秋招路程

    个人信息: 趁着中秋写个帖子记录一下吧.渣渣本,无实习,无高质量证书,走了很多弯路,最后选择的Java后端.现在算是半躺平了,接了几个中小厂的offer保底,20w多的薪资,后面还有几家公司接着面.不 ...