手记

Jquery实现的高亮效果代码分享

 分享一段Jquery实现的一种常用高亮效果代码:


<html>
<head>
   <title>jquery</title>
   <style>
       body
       {
           font-size: 12px;
       }
       li
       {
           list-style: none;
           height: 34px;
           padding-top: 5px;
       }
   </style>

   <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

   <script type="text/javascript">
$(document).ready(function(){    
   var oInputs = $("ul.demo input");

   oInputs.each(function(i){
       oInputs.eq(i).focus(function(){
           oInputs.eq(i).parent().css("background-color","ccf");
       }).blur(function(){
           oInputs.parent().css("background-color","");
       })
    });
   
   
   oInputs.focus(function(){
       $(this).css("background-color","ff9").blur(function(){
           $(this).css("background-color","");
       });
   })
})
   </script>

</head>
<body>
   <ul class="demo">
       <li>
           <h5>
               注册选项</h5>
       </li>
       <li>用户名:<input type="text" value="" id="name" style="width: 200px" /></li>
       <li>密 码:<input type="password" value="" id="pass" style="width: 200px" /></li>
       <li>爱 好:<input type="checkbox" value="" />篮球&nbsp;<input type="checkbox" value="" />足球&nbsp;<input
           type="checkbox" value="" />音乐</li>
   </ul>
   </script>
</body>
</html>


0人推荐
随时随地看视频
慕课网APP