我这里有什么地方不对吗？
来源：6-5 光标聚焦事件（onfocus）
Erkeleteyin
2016-10-27 09:19
<!DOMTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js编程练习</title>
<!--css begin-->
<style type="text/css">
*{margin: 0 ; padding: 0; font-family: "宋体"}
#main{ border: 2px solid red; height: 100%;}
#showmore{
position: absolute;
top: 5%;
left: 25%;
border-top: 1px solid blue;
border-right: 1px solid blue;
border-left: 1px solid blue;
background: white;
width: 400px;
}
</style>
<!--css end-->
<!--这是内部JS代码-->
<script type="text/javascript">
//光标失焦
function showOnblur() {
var sob = document.getElementById("showmore");//通过id获取
sob.style.display = "none";//隐藏内容
}
//光标聚集
function moreOnfocus() {
var mof = document.getElementById("showmore");
mof.style.display = "block"; //显示内容
}
</script>
<!--内部js end-->
</head>
<body>
<div id="main">
<p id="mainp" >简介：做为WEB攻城师必备技术JavaScript，
本课程从如何插入JS代码开始，学<span id="more1" onfocus="moreOnfocus()" >[更多]<span></p>
<div id="showmore" onblur="showOnblur()" >简介：做为W
EB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，
学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、
知识的使用等，实现运用JS语言为网页增加动态效果，达到与
用户交互的目的。</div>
</div>
</body>
</html>为什么#showmore的内容没有隐藏。。。
写回答
关注
2回答
-
- Sheryl要做优秀的UID
- 2016-10-27 10:05:09
onfocus onblur事件只对于文本框有效
-
- Sheryl要做优秀的UID
- 2016-10-27 10:06:54
<!DOMTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js编程练习</title> <!--css begin--> <style type="text/css"> *{margin: 0 ; padding: 0; font-family: "宋体"} #main{ border: 2px solid red; height: 100%;} #showmore{ position: absolute; top: 5%; left: 25%; border-top: 1px solid blue; border-right: 1px solid blue; border-left: 1px solid blue; background: white; width: 400px; display:none; //先隐藏 } </style> <!--css end--> <!--这是内部JS代码--> <script type="text/javascript"> //光标失焦 function moreOnfocus() { var sob = document.getElementById("showmore");//通过id获取 sob.style.display = "block";//显示内容 } //光标聚集 function showOnblur() { var mof = document.getElementById("showmore"); mof.style.display = "none"; //隐藏内容 } </script> <!--内部js end--> </head> <body> <div id="main"> <p id="mainp" >简介：做为WEB攻城师必备技术JavaScript， 本课程从如何插入JS代码开始，学<br> <input type="text" id="more1" value="更多" onfocus="moreOnfocus()" > </p> <textarea id="showmore" rows="5" cols="6" placeholder="简介：做为WEB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、知识的使用等，实现运用JS语言为网页增加动态效果，达到与用户交互的目的" onBlur="showOnblur()"></textarea> </div> </body> </html>
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
468194 学习 · 21891 问题
相似问题