码迷,mamicode.com
首页 > Web开发 > 详细

js 鼠标点击

时间:2019-06-15 15:23:46      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:length   鼠标   教程   方法   block   rip   声明   一个   isp   

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

 

js 鼠标点击

标签:length   鼠标   教程   方法   block   rip   声明   一个   isp   

原文地址:https://www.cnblogs.com/gaojian910/p/11027374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!