JS实现的Table选项卡效果(效果图演示)

最新推荐文章于 2023-03-21 17:56:29 发布

white1114579650

最新推荐文章于 2023-03-21 17:56:29 发布

阅读量206

点赞数

分类专栏： js 文章标签： html js

本文链接：https://blog.csdn.net/white1114579650/article/details/118757878

版权

鼠标悬停动态内容 CSS样式 JavaScript事件多内容切换

关键词由CSDN通过智能技术生成

js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin:  0;
			list-style: none;
		}
 
		#box{
			width: 500px;
			height: 500px;
			border: 2px solid black;
			margin: 0px auto;
			margin-top: 50px;
		}
		li{
				width: 100px;
				height: 50px;
				float: left;
				font-size: 30px;
				line-height: 50px;
				text-align: center;
				
			}
			ul{
				overflow: hidden;
			}
			.con{
				width: 500px;
				height: 500px;
				margin: 0px auto;
				margin-top: 20px;
				display: none;
				position: relative;
			}
			.content{
				position: absolute;
				width: 500px;
				height: 400px;
				display: none;
			}
 
	</style>
	<script type="text/javascript">
		window.onload = function()
		{
			//抓所有的li
			var lis = document.getElementsByTagName('li');
			//抓5个内容
			var contents = document.getElementsByClassName('content');
			var con = document.getElementsByClassName('con')[0];
			//抓盒子
			var box = document.getElementById("box");
			
			//遍历li长度 加事件
			for (var i = 0; i < lis.length; i++) 
			{
				lis[i].index = i;  //给属性值保存起来
				lis[i].onmouseover = function()
				{
					var num = this.index;
					hidd(num);  //调用函数 让 所有内容隐藏，让 num的数字的 显示出来
				}
			}
			
			function hidd(num) //调用函数 让 所有内容隐藏，让 num的数字的 显示出来
			{
				for (var j = 0; j < contents.length; j++)  //遍历内容
				{
					contents[j].style.display = 'none';	//让所有内容隐藏
					lis[j].style.color = '#fff';
				}	
				lis[num].style.color = 'black';
				contents[num].style.display = 'block'; // 让该显示的显示
			}			
		}
	</script>
</head>
<body>
	<div id="box">
		<ul>
			<li style="background: red; color: black;">红色</li>
			<li style="background: yellow; color: white;">黄色</li>
			<li style="background: blue; color: white;">蓝色</li>
			<li style="background: saddlebrown; color: white;">棕色</li>
			<li style="background: black; color: white;">黑色</li>
		</ul>
		
		<div class="con" style="display: block;">
			<div class="content" style="background: red;display: block;">
				红色红色红色红色红色
			</div>
			<div class="content" style="background: yellow;display: none;">
				黄色黄色黄色黄色黄色
			</div>
			<div class="content" style="background: blue;display: none;">
				蓝色蓝色蓝色蓝色蓝色
			</div>
			<div class="content" style="background: saddlebrown;display: none;">
				棕色棕色棕色棕色棕色
			</div>
			<div class="content" style="background: black;display: none;">
				黑色黑色黑色黑色黑色
			</div>
		</div>
	</div>
</body>
</html>