简单选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {width: 350px;margin: 0 auto;}
#div1 button{width: 100px; height: 30px; background-color: gray; font-size: 18px;color: white;}
#div1 div{width: 350px; height: 350px; border: 1px solid black; background-color: yellow; display: none}
#div1 .active{background-color: orange}
</style>
<script>
window.onload = function(){
//获取节点
var oDiv = document.getElementById('div1');
var aBtns = oDiv.getElementsByTagName('button');
var aDivs = oDiv.getElementsByTagName('div');
for(var i = 0; i < aBtns.length; i++){
//这个循环，给三个按钮添加onclick点击事件
aBtns[i].index = i; // aBtns[i]看成一个对象，给这个对象添加一个自定义的属性
aBtns[i].onclick = function(){
//1、现将所有按钮的class样式取消
for(var j = 0; j < aBtns.length; j++){
aBtns[j].className = "";
aDivs[j].style.display = 'none';
}
//2、this当前点击的按钮。
this.className = 'active';
aDivs[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id = 'div1'>
<button class = 'active'>吴彦祖</button>
<!-- index = 0 -->
<button>彭于晏</button>
<!-- index = 1 -->
<button>古天乐</button>
<!-- index = 2 -->
<div style = 'display: block'>
吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，祖籍上海，华语影视男演员、导演，毕业于美国俄勒冈大学。1998年出演了个人首部电影作品《美少年之恋》，从而踏入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员。2001年，主演文艺片《游园惊梦》。2003年，凭借动作片《旺角黑夜》提名第24届香港电影金像奖最佳男主角；同年，首次担任电影监制并主演了惊悚片《妖夜回廊》。2004年，因出演动作片《新警察故事》中关祖一角受到广泛关注，并凭借该角色获得第 ...
</div>
<div>
彭于晏，1982年3月24日出生于台湾澎湖，中国台湾影视男演员、歌手。2002年，彭于晏出演了首部电视剧《爱情白皮书》 而踏入演艺圈。2005年因出演仙侠剧《仙剑奇侠传》中唐钰一角而受到关注。2006年主演剧情片《六号出口》。2007年凭借爱情片《基因决定我爱你》提名第44届台湾电影金马奖最佳新演员，并为金马短片单元制作片头，完成了个人导演处女作。2009年发行首张个人EP《非爱不可》。2011年彭于晏凭借励志片《翻滚吧！阿信》提名第48届台湾电影金马奖最佳男主角。2012年起，相继主 ... </div>
<div>
古天乐，1970年10月21日出生于中国香港，中国香港男演员、歌手。
1993年，古天乐签约TVB进入娱乐圈。1995年，在武侠剧《神雕侠侣》中首次担任男主角，饰演亦正亦邪的杨过而成名。1999年，凭借刑侦剧《刑事侦缉档案4》获得TVB万千星辉颁奖典礼最喜爱男主角奖 [1] 。2000年，凭借在家族剧《创世纪》中的反派张自力夺得TVB万千星辉颁奖典礼我最喜爱电视角色奖。2001年，凭借古装穿越剧《寻秦记》第2次获得TVB万千星辉颁奖典礼我最喜爱男主角奖
</div>
</div>
</body>
</html>
浏览器效果：
