简单Tab切换
延迟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切换的更多相关文章
- 超简单TAB切换
<div class="tab-fbox2"> <ul class="title-list2 clearfix"> <li cla ...
- jquery实现简单的Tab切换菜单
实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
- 简单的Tab切换组件
由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...
- react简单的tab切换 (styled-components)
其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...
- DIV+CSS 样式简单布局Tab 切换
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- react实现的tab切换组件
我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...
随机推荐
- JDBC中级篇（MYSQL）——处理文件(BLOB)
注意:其中的JdbcUtil是我自定义的连接工具类:代码例子链接: package b_blob_clob; import java.io.FileInputStream; import java.i ...
- Hopper Disassembler系列之Sublime Text 3 爆破
https://www.52pojie.cn/thread-793069-1-1.html 当参数少于7个时, 参数从左到右放入寄存器: rdi, rsi, rdx, rcx, r8, r9. 当参数 ...
- Linux新加磁盘并挂载到目录
步骤:1.分区 ----> 2.格式化 ----> 3.挂载 一.查看当前情况 1. 2. 二.磁盘分区 fdisk /dev/sdb 1.输入n,表示添加一个新的分区 2. e ex ...
- Shell脚本一键部署——源码编译安装MySQL及自动补全工具
Shell脚本一键部署--源码编译安装MySQL及自动补全工具 编译安装MySQL 1.软件包 Mysql安装包 将安装包拖至/opt目录下,编辑一个脚本文件,将以下内容复制进去,然后source或者 ...
- 20210716考试-NOIP16
考场时Prim的 $i$ 写成 $k$ 100->0 rank1->rank23 T1 Star Way To Heaven 考场正解:假设你要二分答案,则几个圆组成几道"屏障& ...
- python3 用multiprocessing模块传递多个参数
from datetime import datetime from time import sleep import numpy as np import multiprocessing # fro ...
- Identity用户管理入门一（框架搭建）
理论知识微软官方文档最完整,最详细,这里只一步步的介绍如何使用,地址:https://docs.microsoft.com/zh-cn/aspnet/core/security/authenticat ...
- js实现钟表
在网页上显示一个钟表 html: <body onload="startTime()"> <div id="txt"></div& ...
- Python脚本运行出现语法错误：IndentationError:unexpected indent
对于py来说典型错误就是缩进,,烦不胜烦,整理一下解决方法:一个python脚本,本来都运行好好的,然后写了几行代码,而且也都确保每行都对齐了,但是运行的时候,却出现语法错误: Indentation ...
- photoshop 网页png图标保存后有锯齿解决办法
有些人用png图片时为了要兼容在IE6下对png32或png24不透明的时候,他们都是用js处理的. png分为三种格式png8,png24,png32这三种格式,数值越高图片的精度质量就越好,相对的 ...