简单Tab切换
2024-09-03 04:04:14
延迟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>
最新文章
- css3 FlexBox 弹性布局
- Swift - mutating关键字的使用
- 【HDU4578 Transformation】线段树
- SqlSever基础 dateadd day 增加五天
- java笔试题(2)
- C#图片压缩的实现方法
- 重力加速度陀螺仪传感器MPU-6050（一）
- c#之内置类型
- Appium 出现 > error: com.test/.activity1 never started. Current: com.test/.activity2
- nginx+lua+redis构建高并发应用（转）
- U31网管配置
- Spring mvc之 发邮件（qq.163...）
- Python玩转Arduino——简单介绍
- QML学习笔记（五）— 做一个简单的待做事项列表
- Redis protected-mode属性解读
- HDU 1257 最少拦截系统 【贪心】
- SQL 时间段转换格式
- HDU6201
- textarea（多行文本域）
- JAVA面对对象(一)——封装