js 鼠标点击

Posted 2022-01-12 gaojian910

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" >
                        <img src="res/img/intro1_2.jpg" >
                        <img src="res/img/intro1_3.jpg" >
                    </div>
                    <div class="nei_img" style="display: none">
                        <img src="res/img/intro2_1.jpg" >
                    </div>
                    <div class="nei_img" style="display: none">
                        <img src="res/img/intro3_1.jpg" >
                    </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‘;