简单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这种优雅的 ...
随机推荐
- list切片
对list进行切片 取一个list的部分元素是非常常见的操作.比如,一个list如下: >>> L = ['Adam', 'Lisa', 'Bart', 'Paul'] 取前3个元素 ...
- playwright-python 处理Text input、Checkboxs 和 radio buttons（三）
Text input 输入框输入元素,直接用fill方法即可,支持 <input>,<textarea>, [contenteditable] 和<label>这些 ...
- MySQL高可用主从复制部署
原文转自:https://www.cnblogs.com/itzgr/p/10233932.html作者:木二 目录 一 基础环境 二 实际部署 2.1 安装MySQL 2.2 初始化MySQL 2. ...
- Redis-技术专区-帮从底层彻底吃透RDB技术原理
每日一句 低头是一种能力,它不是自卑,也不是怯弱,它是清醒中的嬗变.有时,稍微低一下头,或者我们的人生路会更精彩. 前提概要 Redis是一个的键-值(K-V)对的内存数据库服务,通常包含了任意个非空 ...
- CPU内部结构域寄存器
CPU内部结构域寄存器 64位和32位系统区别: 寄存器是CPU内部最基本的存储单元. CPU对外是通过总线(地址.控制.数据)来和外部设备交互的,总线的宽度是8位,同时CPU的寄存器也是8位,那 ...
- viper配置管理
安装 go get github.com/spf13/viper viper支持的功能 1.可以设置默认值 2.可以加载多种格式的配置文件,如JSON,TOML,YAML,HCL和Java属性配置文件 ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- GoLang设计模式02 - 工厂模式
工厂模式是一种创建型模式,也是最常用的设计模式之一.调用方通过工厂产出并获取对象,可以不必关注对象创建的细节和构建逻辑. 在工厂模式下,调用方只和工厂进行交互,并告诉工厂具体获取哪种类型的对象.工厂负 ...
- Jenkins拉取Git远程仓库中指定目录至本地指定目录
Jenkins拉取源码是非常实用的操作,比如每天在跑自动化测试前,拉取Git远程仓库中最新的脚本至本地.那么,Jenkins如何拉取Git远程仓库中指定目录至本地指定目录呢?下面来看看具体的设置方法. ...
- K8S_第一课作业_20200407
(1)通过cgroup来限制memory ##消耗内存脚本 /tmp/xmem.sh #!/bin/bash mkdir /tmp/memory mount -t tmpfs -o size=2048 ...