如何在焦点输入上显示隐藏div

Question

如何在现有div上显示hide div，现有的​​div应隐藏。

我现有的div

<div class="container">
<div class="row">
<input class="abc" type="text" />
</div>
</div>

我的隐藏Div我希望在点击操作

上显示

<div class="container newone">
<div class="row">
<span>some text here</span>
</div>
</div>

的CSS

.newone{ position:absolute; left:0; right:0; top:0px; display:none;}

Answer 1

您可以使用输入的focus和focusout事件隐藏并使用javascript显示相关消息：

＆＃13;

＆＃13;

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';
});

＆＃13;

.newone { 
  display:none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用addClass使用jQuery隐藏div，请参阅以下代码。

$( ".container" ).addClass( "newone" );

欲了解更多信息，请参阅以下网址

https://api.jquery.com/addclass/

Answer 3

这应该有效

 $(function() {

    $(".abc").focusin(function() {
        $(".newone").show();
    }).focusout(function () {
        $(".newone").hide();
    });
});