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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript实现简单的选项卡 小白勿喷 有需要改进可以留言，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1288字，纯文字阅读大概需要2分钟。

内容图文

还是老规矩,上代码 `

<!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://www.icode9.com/i/ll/?i=20190531194543230.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd5dWUxOTk3,size_16,color_FFFFFF,t_70)

内容总结

以上是互联网集市为您收集整理的javascript实现简单的选项卡 小白勿喷 有需要改进可以留言全部内容，希望文章能够帮你解决javascript实现简单的选项卡 小白勿喷 有需要改进可以留言所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/813352.html

来源：【匿名】