js 鼠标点击

js鼠标点击 改变显示跟隐藏以及加新的class（在css里封装一个需要样式）

该方法用到的是 onclick 属性在单击鼠标时触发。

示例：

HTML代码

<div class="xzlian">
                    <div class="nei">
                        <a href="javascript:" class="aa con">1.创建角色</a>
                        <a href="javascript:" class="aa">2.进入新手教程</a>
                        <a href="javascript:" class="aa">3.快速游戏</a>
                    </div>
                    <div class="nei_img" style="display: block">
                        <img src="res/img/intro1_1.jpg" alt="">
                        <img src="res/img/intro1_2.jpg" alt="">
                        <img src="res/img/intro1_3.jpg" alt="">
                    </div>
                    <div class="nei_img" style="display: none">
                        <img src="res/img/intro2_1.jpg" alt="">
                    </div>
                    <div class="nei_img" style="display: none">
                        <img src="res/img/intro3_1.jpg" alt="">
                    </div>
                </div>
            </div>

js代码

 var aa = document.getElementsByClassName('aa'); 声明一个变量aa  是为了找到需要点击的按钮
    var nei = document.getElementsByClassName('nei_img'); 声明一个变量nei 找到需要显示隐藏的内容
    for (var i=0;i<aa.length;i++){
        aa[i].index=i; 
        aa[i].onclick = function () {
            for (var i=0;i<aa.length;i++){
                aa[i].className = 'aa';
                nei[i].style.display = 'none';
            }
            this.className = 'aa con';
            nei[this.index].style.display='block';
        }
    }