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';
        }
    }