来吧 Baby ！！！！

现在已经正式进入 JavaScript 阶段了，学习 web前端最大的成就感就是项目能够正确跑一边的那一刻。今天来给大家讲讲一个点击事件如何实现一下效果！！！！

?以下是我们平常浏览网页的时候最常见的一组操作，在导航栏上任意切换的一个效果。

?做网页的第一步，首先要搭建好结构，由下图不难看出我们需要一个大盒子里面装两个小盒子。

?实现结构搭建的代码如下所示：

    <div class="box">
        <div class="inblock">
            <div class="in">所</div>
            <div>见</div>
            <div>即</div>
            <div>所</div>
            <div>得</div>
        </div>
        <div class="img">
            <img src="../images/111.jpg" alt="" class="on out">
            <img src="../images/222.jpg" alt="" class="on">
            <img src="../images/333.jpg" alt="" class="on">
            <img src="../images/444.jpg" alt="" class="on">
            <img src="../images/555.jpg" alt="" class="on">
        </div>
    </div>

?接下来就是给我们的结构一个装饰效果，学过 web 的都知道，CSS 是用来渲染我们网页的。

        .box {
            border: 1px solid rgb(187, 186, 186);
            background-color: rgb(231, 227, 227);
        }

        .inblock>div {
            float: left;
            padding: 10px 20px;
            font-size: 25px;
        }

        .img>img {
            width: 100%;
        }

?从项目图上我们可以看出选中的字体是有一个背景颜色和一个字体颜色的变化，所以我们要先设置一个默认的样式，给第一个字设置。我们这里的图片也要处理，不处理的话全部图片就会全部显示在我们的界面上，我们现在所要实现的效果是点击一个文字切换一张图片。这里的 "on" 和 "out"类备用。

        .in {
            background-color: rgb(187, 27, 27);
            color: #fff;
        }

        .on {
            display: none;
        }

        .out {
            display: block;
        }

现在结构和样式都已经写好了，接下来就是使用 JS 来控制它的行为，让它实现最终的点击效果！

    <script>
        var inblock = document.querySelector('.inblock').querySelectorAll('div');
        var img = document.querySelector('.img').querySelectorAll('img')
        for (var i = 0; i < inblock.length; i++) {
            inblock[i].setAttribute('data-num', i);
            inblock[i].onclick = function () {
                for (var i = 0; i < inblock.length; i++) {
                    inblock[i].className = '';
                }
                this.className = 'in';
                var index = this.getAttribute('data-num');
                for (var i = 0; i < img.length; i++) {
                    img[i].className = 'on'
                }
                img[index].className = 'out'
            }
        }
    </script>

这段代码就是需要点击的对象和切换的图片获取过来，通过循环给每个文字添加点击事件，把刚刚我们写好的类调用过来，这样我们每点击一个文字所呈现出来的效果就能实现了。

当然图片要和文字一一对应所以就需要给文字添加一个自定义的类，并给上编号，从零开始。因为我们图片获取过来是以一个伪数组的形式存在的。所以这里点击的那个文字需要返回此文字的编号，然后再选择对应的图片切换。

注意：这里的文字和图片在点击和切换的时候都需要用到排他思想！

排他思想就是先清除掉元素的全部样式然后在给当前元素设置样式！