<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tab栏切换功能</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: linear-gradient(45deg, #fbda61, #ff5acd);
}
#tab {
width: 300px;
height: 300px;
margin: 80px auto;
background-color: #fff;
border-radius: 20px;
box-sizing: 0 35px 88px rgb(0, 0, 0, 0, 15);
}
#title {
width: 100%;
height: 50px;
display: flex;
line-height: 50px;
}
#title div {
width: 50%;
height: 100%;
text-align: center;
}
#title div:hover {
cursor: pointer;
color: #1b2d90;
}
#title_1 {
border-top-left-radius: 20px;
}
#title_2 {
border-top-right-radius: 20px;
}
.cs2 {
background-color: #c655a8;
color: aliceblue;
}
#tab_1 {
padding: 30px;
line-height: 30px;
color: #070763;
font-weight: bold;
}
</style>
</head>
<body>
<div id="tab">
<div id="title">
<div id="title_1">信息公告</div>
<div id="title_2" class="cs2">服务公告</div>
</div>
<div id="tab_1">
<ul>
<li>图书每满100减50</li>
<li>精选童书每满100减50</li>
<li>悦小说文学每满100减50</li>
<li>科技好书每满100减50</li>
</ul>
</div>
</div>
<script>
var title_1 = document.getElementById("title_1");
var title_2 = document.getElementById("title_2");
var tab_1 = document.getElementById('tab_1');
var tab = document.getElementById('tab');
//title_2 信息公告点击时
title_2.onclick = function() {
t2();
}
//title_1 服务公告点击时
title_1.onclick = function() {
t1();
}
//改变内容和样式 title_2
function t2() {
title_1.className = 'cs2';
title_2.className = "";
tab_1.innerHTML = `<ul>
<li>关于谨防诈骗的重要提示</li>
</ul>`;
}
//改变内容和样式 title_1
function t1() {
title_1.className = '';
title_2.className = "cs2";
tab_1.innerHTML = `<ul>
<li>图书每满100减50</li>
<li>精选童书每满100减50</li>
<li>悦小说文学每满100减50</li>
<li>科技好书每满100减50</li>
</ul>`;
}
var timin; //用来存放定时器的
var bool = false; //来回切换样式
function timing() {
if (bool == false) {
t1()
bool = true;
} else {
t2();
bool = false;
}
}
//启动定时器 来回切换样式 3秒一次
timin = setInterval('timing()', 3000);
//当鼠标经过#tab 触发
//mouseenter 当鼠标进入触发一次
//mousemove 当鼠标经过触发就
tab.onmouseenter = function() {
//清除定时器
clearInterval(timin);
}
//当鼠标指针离开 #tab 元素时
//mouseleave 包括子标签
//mouseout 不会包括子标签
tab.onmouseleave = function() {
//启动定时器
timin = setInterval('timing()', 3000);
}
</script>
</body>
</html>
效果如下