简单选项卡
Posted taohuaya
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单选项卡相关的知识，希望对你有一定的参考价值。
简单选项卡
<!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>
浏览器效果：
以上是关于简单选项卡的主要内容，如果未能解决你的问题，请参考以下文章