[英]how to show hide div on focus input
How to show hide div upon existing div, existing div should be hide. 如何在现有div上显示hide div,现有div应该是hide。
<div class="container">
<div class="row">
<input class="abc" type="text" />
</div>
</div>
<div class="container newone">
<div class="row">
<span>some text here</span>
</div>
</div>
.newone{ position:absolute; left:0; right:0; top:0px; display:none;}
You can use the focus
and focusout
events of an input to hide and show a related message using javascript: 您可以使用javascript输入的focus
和focusout
事件来隐藏和显示相关消息:
var input = document.getElementById('myinput'); var message = document.getElementsByClassName('newone')[0]; input.addEventListener('focus', function() { message.style.display = 'block'; }); input.addEventListener('focusout', function() { message.style.display = 'none'; });
.newone { display:none; }
<div class="container"> <div class="row"> <input class="abc" type="text" id='myinput'/> </div> </div> <div class="container"> <div class="row"> <span>some text here </span> <span>some text here</span> </div> </div> <div class="container newone"> <div class="row"> <span>some text here</span> </div> </div>
this should work 这应该工作
$(function() {
$(".abc").focusin(function() {
$(".newone").show();
}).focusout(function () {
$(".newone").hide();
});
});
You could use addClass
to hide the div using jQuery, Please refer the below code. 您可以使用addClass
使用jQuery隐藏div,请参考以下代码。
$( ".container" ).addClass( "newone" );
For more info please refer the below url 有关更多信息,请参考以下网址
https://api.jquery.com/addclass/ https://api.jquery.com/addclass/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.