html 代码:
姓名:张大牛 < br/>
<html>
<head>
<meta charset="utf-8">
<style>
p {
width:310px;
height:180px;
font-size:20px;
background-color:green;
display:none;
}
button {
width:100px;
}
.active {
background-color:red;
}
.show {
display: block;
}
</style>
</head>
<body>
<button class='active'> 男 1 号 </button>
<button > 男 2 号 </button>
<button > 男 3 号 </button>
<p class="show">
外号:老牛 < br/>
性别:男 < br/>
爱好:女 < br/>
最喜欢的事:我开心就好 < br/>
曹操,666666
</p>
<p>
刘备,888888
</p>
<p>
效果图:
</p>
</body>
<script>
var aButton = document.getElementsByTagName('button');
var aDiv = document.getElementsByTagName('p');
// 给每一个 button 都添加点击事件
for (var i = 0; i < aButton.length; i++) {
// 通过给 button 自定义属性来解决
aButton[i].index=i;// 每个键存储一下
aButton[i].onclick = function () {
// 点击事件的实现?? this 就是点击的 button
for (var j = 0; j < aButton.length; j++) {
aButton[j].className = '';
aDiv[j].className = '';
}
// 再给应该添加的对象添加 className
this.className = 'active';
aDiv[this.index].className = 'show';
};
}
</script>
</html>
来源: https://www.2cto.com/kf/201801/715291.html