简单选项卡
<!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>
浏览器效果：
