时间戳

首页 > 解决方案 > 单击输入时将类添加到标签

jquery - 单击输入时将类添加到标签

问题描述

这是我有不同的跨度和每个跨度的一个输入和一个标签的东西。我想要的是当我单击输入时，它必须向标签添加一个类。

.in {position: relative; background: none}
.lb {position: absolute; color: #000; z-index: 1}
.outer {display: block; width: 100%; margin: 60px}
.color {color: green}
<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>

<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>

<span class="outer">
  <label class="lb">hi there</label>
  <input class="in" type="text">
</span>

标签： jqueryhtmlcss

解决方案

$( "input" ).focus(function() {
  $( this ).parent().find( "label").addClass("focus");
  $( this ).parent().addClass(" focus-span");
});

$( "input" ).focusout(function() {
  $( this ).parent().find( "label").removeClass("focus");
  $( this ).parent().removeClass(" focus-span");
});
.in{position:relative; backgorund:none;  }
.lb{position:absolute; color:#000; z-index:1;}
.outer{display:block; width:100%; margin:60px;  }
 .color{color:green;}
 .focus{
   color:red;
 }
 .focus-span{
   border: 1px solid red;
 }
<html>
<head>
<title>Page Title</title>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
 
<span class="outer">
<label class="lb">hi there</label>
<input  class="in" type="text"/>
</span>

<span class="outer">
<label class="lb">hi there</label>
<input  class="in" type="text"/>
</span>

<span class="outer">
<label class="lb">hi there</label>
<input  class="in" type="text"/>
</span>

 

 
</body>
</html>

恢复代码添加焦点也添加一些CSS来查看更改希望你能找到你的解决方案

推荐阅读