js如何实现:在页面中任意位置点击鼠标,则在该位置显示一个div

JavaScript013

js如何实现:在页面中任意位置点击鼠标,则在该位置显示一个div,第1张

1、先在一个文件目录下创建四个html文件,分别为index.html、page1.html、page2.html、page3.html。

2、接着用可编辑文本文件的软件打开四个html文件。如图先在index.html中加入三个div。

3、接着如图编写js代码,使得点击指定div后跳转指定页面。

4、其他三个html文件只是简单显示一下信息,三个文件的内容如图。

5、编辑完后,用浏览器打开index.html文件,结果如图。

6、点击第一个div,效果如图。

7、点击第二个div,效果如图。这样就成功用js实现点击指定div后跳转到指定页面了。

<script>

window.onload = function ()

{

var oDiv = document.getElementById('div1')

var oTxt = document.getElementById('txt')

oDiv.onclick = function ()

{

oTxt.focus()

}

}

</script>

知道文本框都有blur事件吗?就是光标在闪的时候就处于焦点,当你点其他地方时,光标就没了,就会触发blur事件。你要做到当div显示时,让隐藏在div内的文本框处于焦点,点击其他地方时,文本框的焦点自然会消失,blur事件把当前div隐藏。!!注意:当点击显示的div时要用脚本处理div中的隐藏文本框处于焦点可以用jquery脚本框架,方便,浏览器的兼容性好