tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换

最新推荐文章于 2023-04-11 23:23:07 发布

我的派蒙爱吃草

最新推荐文章于 2023-04-11 23:23:07 发布

阅读量612

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_70020706/article/details/127979957

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

效果如下