javascript实现简单的选项卡小白勿喷有需要改进可以留言_javascript核心技术开发解密选项卡的坑-优快云博客

博客直接给出代码，结合标签可知，可能是关于JavaScript实现选项卡的代码示例，涉及信息技术领域的前端开发内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是老规矩,上代码 `

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		li{
			list-style-type: none;
			width: 100px;
			height: 30px;
			background: #2bf666;
			line-height: 30px;
			text-align: center;
			float: left;
			margin:10px;
			cursor: pointer;
		}
		div{
			width: 340px;
			height: 300px;
			background: yellow;
			text-align: center;
			line-height: 300px;
			margin: 10px;

		}
	</style>
</head>
<body>
	<li onclick="func(0)">女明星</li>
	<li onclick="func(1)">男明星</li>
	<li onclick="func(2)">警察</li>
	<p style="clear:both;"></p>
	<div id="div1" style="display:block;">
		我是女明星
	</div>
	<div id="div2" style="display:none;">
		我是男明星
	</div>
	<div id="div3" style="display:none;">
		我是警察
	</div>
</body>
<script>
	//找对象 该属性 
	//获取对象
	divs = document.getElementsByTagName('div');
	lis = document.getElementsByTagName('li');
	//先定义第一个li标签的背景色 默认选中
	lis[0].style.background ='red';

	function func(a)
	{
		

		for(i=0; i<divs.length;i++)
		{
			if(a == i)
			{
				divs[i].style.display ='block';
				lis[i].style.background ='red';

			}else{

				divs[i].style.display ='none';
				lis[i].style.background ='#2bf666';

			}
		}
	}
</script>

效果图为
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190531194543230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd5dWUxOTk3,size_16,color_FFFFFF,t_70)