为了账号安全,请及时绑定邮箱和手机立即绑定

我这里有什么地方不对吗?

<!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 回答

onfocus onblur事件只对于文本框有效


 

0 回复 有任何疑惑可以回复我~
#1

Erkeleteyin 提问者

哦哦,是这样啊,非常感谢!
2016-10-27 回复 有任何疑惑可以回复我~
#2

Sheryl要做优秀的UID 回复 Erkeleteyin 提问者

没关系 我也是初学者 一起努力!
2016-10-27 回复 有任何疑惑可以回复我~
#3

Erkeleteyin 提问者 回复 Sheryl要做优秀的UID

嗯嗯,加油
2016-10-27 回复 有任何疑惑可以回复我~
#4

慕用9564390

请问个人理解还是就是这样
2017-05-29 回复 有任何疑惑可以回复我~
查看1条回复
<!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>


2 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

我这里有什么地方不对吗?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信