夜光带你走进前端工程师（三十四 jS ）

最新推荐文章于 2019-06-01 18:15:57 发布

GeniusTeam-夜光

最新推荐文章于 2019-06-01 18:15:57 发布

阅读量170

点赞数

分类专栏： My thoughts 前端工程师 JS核心技术文章标签： js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90710683

版权

My thoughts 同时被 3 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

JS核心技术

23 篇文章 1 订阅

订阅专栏

夜光序言：

以后做沉默寡言的人

不吵不闹，不哭不笑

愿自己以后面带微笑

笑看这现实云卷云舒

正文：

继续优化：这是一个不断优化的过程注意细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 400px;
            height: 40px;
            margin: 100px auto;
            border: 1px solid #cccccc;
        }
        .king{
            background-color: beige;
        }
        .bottom div{
            width: 100%;
            height: 300px;
            background-color: aquamarine;
            display: none;
        }
    </style>
</head>
<script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button"); // 所有的button
        var divs = document.getElementById("divs").getElementsByTagName("div"); //需要两个来设置
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                for(var j=0;j<btns.length;j++){
                    btns[j].className = "";
                }
                this.className = "king";
            }
        }
    }
</script>
<body>
<div class="box">
    <div class="top">
        <button>海贼王</button>
        <button>火影忍者</button>
        <button>东京食尸鬼</button>
        <button>名侦探柯南</button>
    </div>
    <div class="bottom" id="divs"> 
        <div style="display: block">一号盒子</div>
        <div>二号盒子</div>
        <div>三号盒子</div>
        <div>四号盒子</div>
        <div>五号盒子</div>
    </div>

</div>
</body>
</html>

继续优化：

排他思想大放光彩夜光

<script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button"); // 所有的button
        var divs = document.getElementById("divs").getElementsByTagName("div"); //需要两个来设置
        for(var i=0;i<btns.length;i++){
            btns[i].index = i;   //获得当前索引号   十分重要帅气
            btns[i].onclick = function(){
                for(var j=0;j<btns.length;j++){
                    btns[j].className = "";
                }
                this.className = "king";

                //先隐藏下面所有的盒子排他思想你懂的夜光
                for(var i=0;i<divs.length;i++){
                    divs[i].style.display="none";
                }

            }
        }
    }
</script>

继续优化：

快要创作完成

切换栏目优化

夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: aliceblue;
        }
        .box{
            width: 400px;
            height: 80px;
            margin: 100px auto;
            border: 1px solid #cccccc;
        }
        .king{
            background-color: aquamarine;
        }
        .bottom div{
            width: 100%;
            height: 600px;
            background-color: aquamarine;
            display: none;
        }
        p{
            font-size: 30px;
            font-family: 隶书;
            text-align: center;
        }
    </style>
</head>
<script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button"); // 所有的button
        var divs = document.getElementById("divs").getElementsByTagName("div"); //需要两个来设置
        for(var i=0;i<btns.length;i++){
            btns[i].index = i;   //获得当前索引号   十分重要帅气
            btns[i].onclick = function(){
                for(var j=0;j<btns.length;j++){
                    btns[j].className = "";
                }
                this.className = "king";

                //先隐藏下面所有的盒子排他思想你懂的夜光
                for(var i=0;i<divs.length;i++){
                    divs[i].style.display="none";
                }
                //留下中意的那个   和点击的索引号相关的那个   序号
                divs[this.index].style.display = "block";
            }
        }
    }
</script>
<body>
<p><img src="02.jpg" width="400px" height="300px"><br/>海贼王悬赏金鉴赏设计 ID ：夜光 </p>
<div class="box">
    <div class="top">
        <button>一家</button>
        <button>兄长</button>
        <button>路飞</button>
        <button>索隆</button>
        <button>娜美</button>
        <button>乔巴</button>
        <button>弗兰克</button>
        <button>罗宾</button>
        <button>乌索普</button>
        <button>布鲁克</button>
        <button>甚平</button>
        <button>SaBo</button>
        <button>AiSi</button>
    </div>
    <div class="bottom" id="divs"> 
        <div style="display: block" id="a"><img src="一家01.jpg" width="100%" height="600px"></div>
        <div id="b"><img src="海贼王17.jpg" width="100%" height="600px"></div>
        <div id="c"><img src="海贼王06.png" width="100%" height="600px"></div>
        <div id="d"><img src="海贼王10.jpg" width="100%" height="600px"></div>
        <div><img src="娜美01.jpeg" width="100%" height="600px"></div>
        <div><img src="乔巴01.jpg" width="100%" height="600px"></div>
        <div><img src="海贼王12.jpg" width="100%" height="600px"></div>
        <div id=""><img src="罗宾01.jpg" width="100%" height="600px"></div>
        <div><img src="海贼王08.jpg" width="100%" height="600px"></div>
        <div><img src="布鲁克.jpg" width="100%" height="600px"></div>
        <div><img src="甚平.jpg" width="100%" height="600px"></div>
        <div><img src="sabo.jpg" width="100%" height="600px"></div>
        <div><img src="aisi.jpg" width="100%" height="600px"></div>
    </div>

</div>
</body>
</html>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（三十四 jS ）

夜光序言：以后做沉默寡言的人不吵不闹，不哭不笑愿自己以后面带微笑笑看这现实云卷云舒正文：继续优化：这是一个不断优化的过程注意细节<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"...
复制链接

扫一扫