Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

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

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
网页表单中的radio背景效果

分类： Html/Css

2014-07-23 11:56:43


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style>
  7.     .code{display:none;}
  8.     </style>
  9. </head>
  10. <body>
  11. <div style=" width:474px; height:21px; padding-left:15px; padding-top:9px;" id="cn1"><input type=radio name=sname value="">123</div>
  12. <div id="SenFe_1" class="code" style=" width:491px; height:199px; background:#F30"></div>
  13. <div style=" width:474px; height:21px; padding-left:15px; padding-top:9px;" id="cn2"><input type=radio name=sname value="">456</div>
  14. <div id="SenFe_2" class="code" style=" width:491px; height:199px; background:#F30"></div>
  15. <div style=" width:474px; height:21px; padding-left:15px; padding-top:9px;" id="cn3"><input type=radio name=sname value="">789</div>
  16. <div id="SenFe_3" class="code" style=" width:491px; height:199px; background:#F30"></div>
  17. <script type="text/javascript">
  18.     var inp=document.getElementsByTagName("input");
  19.     
  20.     /*
  21.     function getParentNode(node){
  22.         if(node.nodeType==1){
  23.             return node;
  24.         }
  25.         if(node.parentNode){
  26.             getParentNode(node.parentNode);
  27.         }
  28.         return null;
  29.     }
  30.     */
  31.     function getNextNode(node){
  32.         if(node.nodeType==1){
  33.             return node;
  34.         }
  35.         if(node.nextSibling){
  36.             return getNextNode(node.nextSibling);
  37.         }
  38.         
  39.         return null;
  40.     }
  41.     
  42.     function getId(id){
  43.         return document.getElementById(id);
  44.     }
  45.     
  46.     for(var i=0;i<inp.length;i++){
  47.         inp[i].onchange=function(){
  48.             //var c=getParentNode(this.parentNode);
  49.             var c=this.parentNode;
  50.             var div=getNextNode(c.nextSibling);
  51.             //alert(div.getAttribute("id"));
  52.             getId("SenFe_1").style.display="none";
  53.             getId("SenFe_2").style.display="none";
  54.             getId("SenFe_3").style.display="none";
  55.             div.style.display="block";
  56.             getId("cn1").style.background="#000";
  57.             getId("cn2").style.background="#000";
  58.             getId("cn3").style.background="#000";
  59.         }
  60.         inp[i].onclick=function(){ //ie的BUG
  61.             this.blur();
  62.         }
  63.     }
  64. </script>
  65. </body>
  66. </html>

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

上一篇：复选框（checkbox）全选/全不选/反选代码

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

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

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

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

16024965号-6