码迷,mamicode.com
首页 > 其他好文 > 详细

简单选项卡

时间:2018-09-05 08:57:35      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:样式   档案   分享图片   浏览器   info   oct   关注   台湾   tle   

 

简单选项卡

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

 

浏览器效果:

技术分享图片

 

简单选项卡

标签:样式   档案   分享图片   浏览器   info   oct   关注   台湾   tle   

原文地址:https://www.cnblogs.com/taohuaya/p/9589326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!