表单现阶段行高亮的实现
表单当前行高亮的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function() {
$(this)
.parent()
.addClass("curFocus")
.children("div")
.toggle();
});
$("input").blur(function() {
$(this)
.parent()
.removeClass("curFocus")
.children("div")
.toggle();
});
$('<div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div>').appendTo("div.single-field");
});
</script>
</head>
<body>
<div id="page-wrap">
<form>
<div class="single-field">
<label for="Name">Name:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Email">Email:</label>
<input name="Email" type="text"></input>
</div>
<div class="tl-line"></div>
<div class="tr-line"></div>
<div class="bl-line"></div>
<div class="br-line"></div>
</form>
</div>
</body>
</html>
具体示例参考附件。