延迟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. Navicate 连接阿里云MySQL(两种方式及原理讲解)

    Navicate 连接阿里云(两种方式及原理讲解) 一.直连方式(通过3306端口) 1.概述 2. 环境准备 3.操作及讲解 二.使用SSH通道 1.概述 2.环境准备 3.操作及讲解 如果对你有帮 ...

  2. 一些Java知识点

    1 import java.util.ArrayList; 2 3 public class Main { 4 5 public static void main(String[] args) { 6 ...

  3. Mysql 日期格式化 复杂日期区间查询

    前言 最近在做项目涉及到Mysql的复杂日期查询,日期查询其实在数据库中查询其实还是用的挺多的,比如查询开始日期到结束日期的区间信息,查询日期小于有效日期的信息,查询当天的日期,明天的日期,做比较等. ...

  4. Notepad++插件推荐和下载

    Notepad++因为其强劲的插件支持,越来越受到编程爱好者的喜欢.很多优秀的插件现在已经默认安装了,下面是100多款受欢迎的Notepad++插件的介绍和下载地址. XML Tools 这个插件是包 ...

  5. 老司机带你体验SYS库多种新玩法

    导读 如何更加愉快地利用sys库做一些监控? 快来,跟上老司机,体验sys库的多种新玩法~ MySQL5.7的新特性中,非常突出的特性之一就是sys库,不仅可以通过sys库完成MySQL信息的收集,还 ...

  6. 关于ES6中Promise的应用-顺序合并Promise,并将返回结果以数组的形式输出

    1.Promise 基础知识梳理 创建一个Promise实例 const promise = new Promise(function(resolve, reject) { if (success){ ...

  7. python使用pip安装模块出错 Retrying (Retry(total=0, connect=None, read=None, redirect=None, status=None))

    python使用pip安装模块出错 Retrying (Retry(total=0, connect=None, read=None, redirect=None, status=None)) 问题: ...

  8. rtsp->rtmp 推流直播 Plan B

    上篇文章我们谈到使用 EasyDarwin 推流后 前端HTML播放器 播放无画面的情况,找了各种播放器都服务正常解决,但使用VLC却能正常播放的问题,我们尝试了很久最后另辟蹊径,找到 nginx安装 ...

  9. Linux内核编译配置脚本

    环境 宿主机平台:Ubuntu 16.04.6 目标机:iMX6ULL Linux内核编译配置脚本 在linux开发过程中熟练使用脚本可以大大简化命令行操作,同时对于需要经常重复操作的指令也是一种备忘 ...

  10. Mysql常用sql语句(5)- as 设置别名

    测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 需要注意,创建数据库和创建表的语句博文都在前面哦 整个 ...