首页 > 文本表单特效 / jquery特效插件 / > jquery简单实现当前表单突出背景颜色

jquery简单实现当前表单突出背景颜色

点击: 3563 , 发布日期: 2011-12-14
jquery简单实现当前表单突出背景颜色

jquery简单实现当前表单突出背景颜色

 jquery简单实现当前表单突出背景颜色,我们在填写表单时为了能更直观的表现当前的表单常用的办法就是突出显示当前表单行,一般都以改变背景色为主。这个就用jquery代码简单的制作这个效果与大家分享一下。

第一步先写个背景色的CSS

<style>
div{height:50px; line-height:50px; width:400px; }
.curFocus {background: #fdecb2;  }
</style>

第二步HTML

<form id="form1" name="form1" method="post" action="">
  <div>Name
  <input type="text" name="textfield" />
  
  </div>
  <div>
    Email
    <input type="text" name="textfield2" />
    
 </div>
</form>

第三步就是写jquery代码

<script>
$(document).ready(function(){ 
    $("input").focus(function() { 
		  
		   $(this).parent().addClass("curFocus")});    
	$("input").blur(function() { 
	       $(this).parent().removeClass("curFocus")}); 
 });
</script>

 

这样jquery简单实现当前表单突出背景颜色特效的作好了。

关键词: jquery+css

注:用QQ登录后即可下载特效,当然你的积分是有限的,望好好利用与赚取!如何获得积分

我要评论
登录再评论
全部评论