还是老规矩,上代码 `
<!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)