javascript实现简单的选项卡小白勿喷有需要改进可以留言

最新推荐文章于 2024-08-23 20:55:13 发布

唐小白成长记

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量113

点赞数

分类专栏： javascript 文章标签： javascript 选项卡

本文链接：https://blog.csdn.net/tangyue1997/article/details/90722003

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

还是老规矩,上代码 `

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

唐小白成长记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现简单的选项卡小白勿喷有需要改进可以留言

还是老规矩,上代码 `<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0px; } li{ ...
复制链接

扫一扫