需求：根据数据动态生成单选组

代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>jQuery单选选中美化特效</title>

 </head>

 <body>

     <style type="text/css">

     h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

     @charset 'utf-8';

     html,body {

              background: #b1afaf;

         }

         .wrap {

             width: 200px;

             height: 100px;

             background: #ffffff;

             margin: 5px ;

             box-shadow: 1px 1px 10px #333,-1px -1px 10px #333;

             cursor: pointer;

             /* line-height: 20px; */

             overflow: hidden;

             /* text-overflow: ellipsis; */

             white-space: nowrap;

             border: 5px solid  #eef2e6;

             float: left;

         }

         .wrap div {

             display: contents;

             width: 200px;

             height: 100px;

             background: #7dbee6;

             padding-top: 1px;

         }

         /*#menu {

             height: 300px;

             width: 200px;

             background: #ffffff;

             float: left;

             margin-top: 25px;

             box-shadow: 1px 1px 10px #333, -1px -1px 10px #333;

         }*/

         /*#user {

             width: 500px;

             height: auto;

             float: left;

             margin-top: 20px;

         }*/

 </style>

 <div>

 <!-- <div id ='menu'></div> -->

 <div id ='user'></div>

 </div>

 <script src="js/jquery.js"></script>

 <script>

     $("#user").empty()

     $(function() {

         let arr =[0,1,2,3,4,5,6,7,8];

         var bo = document.getElementById('user');

         for(var i=0; i<arr.length; i++){

             var div = document.createElement('div');

                 div.innerHTML = '<div><h1>'+arr[i]+'</h1></div>';

                 div.className = "wrap";

                 div.setAttribute("switch","off");

                 div.setAttribute("D",arr[i]);

                 div.onclick = function(){

                     if ($(this).attr("switch") == "off") {

                         $(this).children("div").css({

                             "display" : "block",

                             "color" : "#FFF"

                         }),

                         $(this).attr("switch","on");

                         $(this).siblings().attr("switch","off");

                         $(this).siblings().children("div").css({

                             "display" : "contents",

                             "color" : "#000"

                         })

                     }else {

                         $(this).children("div").css({

                             "display" : "contents",

                             "color" : "#000"

                         }),

                         $(this).attr("switch","off");

                     }

                 };

                 bo.insertBefore(div, bo.lastChild);

         }

 });

 </script>

 </body>

 </html>

效果：

不惜勿喷

jQuery单选组美化特效的更多相关文章

  1. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  2. jQuery图片轮播特效

    效果预览:http://hovertree.com/texiao/jquery/51/ 这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换. 使用的jQuery库版本为1.12.3 , ...

  3. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  4. jQuery元宵猜灯谜特效(元宵十五日猜一个字)

    在线体验:http://keleyi.com/keleyi/phtml/jqtexiao/35.htm jQuery元宵猜灯谜特效的HTML代码如下: <!DOCTYPE html> &l ...

  5. 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]

    无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...

  6. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  7. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  8. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  9. Jquery Mobile转场特效之slide | 小小iPhone开发

    Jquery Mobile转场特效之slide | 小小iPhone开发 2012 Jquery Mobile转场特效之slide 作者:小小   发布:2012-12-12 14:03   分类:j ...

随机推荐

  1. 进制转换 hdoj-2031

    进制转换,原题目:hdoj-2031 题目描述: 输入两个整数,十进制数n(32位整数)和进制r(2<=r<=16 r!=10),求转换后的数. 输入: 7 2 23 12 -4 3 输出 ...

  2. Springboot统一参数验证方式

    Springboot统一验证方式 在提供http api 接口形式的服务中,通过都会传递参数为一个对象.我们需要对这个对象的各个字段进行校验.来判断是否为合法值. 传统的方式为自己获取每个字段的值,自 ...

  3. MySQL查询优化之性能提升一个数量级

    这段时间一直在用kettle做数据抽取和报表,写SQL便是家常便饭了,200行+SQL经常要写.甚至写过最长的一个SQL500多行将近600行.这么长的SQL估计大部分人连看的意愿都没有,读起来也比较 ...

  4. DB中字段为null，为空，为空字符串，为空格要怎么过滤取出有效值

      比如要求取出微信绑定的,没有解绑的 未绑定,指定字段为null 绑定的,指定字段为某个字符串 解绑的,有的客户用的是更新指定字段为1,有的客户更新指定字段为‘1’ 脏数据的存在,比如该字段为空字符 ...

  5. MongoDB（课时29 MapReduce）

    3.7.4 MapReduce MapReduce 是整个大数据的精髓所在(实际中别用,因为在MongoDB中属于最底层操作). MapReduce是一种计算模型,简单的说就是将大批量的工作分解执行, ...

  6. git问题解决(摘录)

    https://blog.csdn.net/dxk539687357/article/details/54629274

  7. php程序突然不能用file_get_contents()访问远程网址了？

    php程序用file_get_contents("http://www.***.com"),一直以来好好的,突然间就不能链接远程网址了,在shell下可以ping通远程网址,可是用 ...

  8. YII之yiic创建YII应用

    yii提供了强大的命令行工具来快速的创建相关组件和应用.下面就来讲解用yiic工具快速创建yii应用我的web目录在 d:\www下 yiiframework在 D:\www\yii\framewor ...

  9. jquery ajax中 php前台后台文件中编辑都是uft-8,返回数据还是乱码

    jquery ajax中 前台后台文件中编辑都是uft-8,返回数据还是乱码 解决如下: 在后台处理文件里面需要再加编辑 header("Content-Type:text/html;cha ...

  10. 超短reads（primer、barcode、UMI、index等）比对方法

    二代reads最短都有50bp,所以大家常用的比对工具都是不支持50bp以下的reads的比对的. 但是,在实际中,我们确实又有比对super short reads的需求. So,我找到了如下方法来 ...