Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 76701
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
一种输入提示特效，匹配时换色

分类： Html/Css

2014-07-24 11:00:55

  • 一种输入提示特效，当你在输入框中输入字母时，如果下边列出的类别中有与你字母相匹配的，那么这些内容将会变成红色，着重显示出来，与输入框下拉提示是基本是一样的，只是换了一个方式。

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title></title>
  5. <style type="text/css">
  6. html, body { margin:20px; padding:0; }
  7. body { color:#454444; padding: 0; font:12px/30px "宋体"; font-family:Tahoma;}
  8. a { color:#454444; text-decoration:none; }
  9. a:visited { color:#454444; }
  10. a:hover, a:active, a:focus { color:#ff6842; text-decoration:underline; }
  11. .fenlei {margin-bottom:30px; width:100%; float:left;}
  12. .fenlei li { float:left; width:20%;}
  13. .fenlei span,.fenlei span a,.fenlei span a:link,.fenlei span a:active,.fenlei span a:visited { color:#f35d61;}
  14. .red{color:red;}
  15. </style>
  16. <script>
  17. function e(a,f){
  18.     for(var i=0,j=a.length;i<j;i++){
  19.         f.call(a[i],i);
  20.     }
  21. }
  22. function s(o){
  23.     var a = document.getElementsByTagName("a"),
  24.         r = new RegExp(o.value,"i");
  25.     e(a,function(n){
  26.         c = a[n].innerHTML;
  27.         if(o.value!="" && r.test(c)){
  28.             a[n].innerHTML = "" + c.replace(/<[^>]*>/gi,"") + "";
  29.         }else{
  30.             a[n].innerHTML = c.replace(/<[^>]*>/gi,"");
  31.         }
  32.     })
  33. }
  34. </script>
  35. </head>
  36. <body>
  37. <form id="form1" name="form1" method="post" action="">
  38.   <input type="text" name="textfield" id="textfield" onkeyup="s(this)" />
  39.   <input type="submit" name="button" id="button" value="提交" />
  40. </form>
  41. <div class="fenlei">
  42.   <ul>
  43.     <li><a href="#" target="_blank">Adidas阿迪达斯</a></li>
  44.     <li><a href="#" target="_blank">AFU阿芙</a></li>
  45.     <li><a href="#" target="_blank">Anna Sui安娜苏</a></li>
  46.     <li><a href="#" target="_blank">AFU阿芙</a></li>
  47.     <li><a href="#" target="_blank">Anna Sui安娜苏</a></li>
  48.   </ul>
  49. </div>
  50. <div class="fenlei">
  51.   <ul>
  52.     <li><a href="#" target="_blank">barbie芭比</a></li>
  53.     <li><a href="#" target="_blank">Balo贝罗</a></li>
  54.     <li><a href="#" target="_blank">barbie芭比</a></li>
  55.     <li><a href="#" target="_blank">barbie芭比</a></li>
  56.     <li><a href="#" target="_blank">Balo贝罗</a></li>
  57.   </ul>
  58. </div>
  59. </body>
  60. </html>


阅读(197) | 评论(0) | 转发(0) |
0

上一篇：体滚动条如何出现在左侧

下一篇：JS给网页加上背景音并可以选择音效

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6