简单选项卡

<!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>



 

浏览器效果：

简单选项卡_wxblda