JS鼠标点击功能

JS鼠标点击功能

（撰写时间：2019年8月7日）
下面我们使用Visual Studio这个软件来写一个小案例，我们可以用写一个简单的方法，就是实现一个鼠标点击a链接标签的时候出现在另外一个div里面显示的功能效果。
那么这个代码要怎么写呢，首先我们需要先在界面上写一下的Html的代码，我们来看一下界面的代码是什么。
我们先看一下Html页面的截图：

在截图中我们可以看到界面的代码就是，很简单的直接给他一个div包裹着一个div然后div里面还嵌套的一个ul的列表，里面还写了3个a标签的嵌套内容。然后接下来看一下属性代码的截图：

从上面可以看到，给这个标签写了3个属性的代码，设置一些他的属性值的高度和宽度，还有一些颜色等。接着定义好界面的属性代码我们接着就需要写一下代码。然后实现出鼠标点击a链接标签的时候出现在另外一个div里面显示的功能效果，见截图：

首先，我们看一下这个代码很短，但是也是基础的。我们先写一个window.onload的方法，这个方法是什么意思呢。onload的意思是事件会在页面或者图像加载完成后立即发生的事件，
那么window.onload的意思就是加载的问题由于HTML加载时由上往下的，在HTML加载的时候，遇到function关键字，声明一个函数的时候，就会在内存中开辟一个新的空间来对函数进行存储，方便以后进行调用。所以，当将function()写到window.onload()=function(){}内部的时候，需要整个页面加载完成的之后，才声明这个函数，也就意味着，当HTML加载到DIV”的时候，window.οnlοad=function(){}里面的函数div还没有被声明，这时候内存中就找不到function()，于是就会报错。
接着我们看一下46到48行，getElementById的意思是方法可以返回对拥有指定ID的第一个对象的引用，也就是获取到ID为demo的数据，getElementsByTagName的意思就是返回元素的顺序，就是他们在li里面的顺序。
接着我们看一下第49行，写了一个for的循环语句。这个for的循环语句的意思就是循环开始之前设置了一个变量(var i = 0)定义好循环的条件。(i必须小于oto2)。然后最后就是每次执行之后对值进行递增(i++)。然后里面循环的内容就是oto的index内容等于i，然后当他点击的时候就进行对应的数据。
最后他的功能效果就做出来了，接下来我们看一下实现的效果：

最后就实现出鼠标点击a链接标签的时候出现在另外一个div里面显示的功能效果。