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

代码：

 <!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. Mui --- 弹出菜单

    mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...

  2. hdu 5671 Matrix 标记。。。有点晕

    Matrix Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Problem ...

  3. [ios][map]自定义地图标注

    参考:http://blog.csdn.net/mad1989/article/details/8794762 ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图,高 ...

  4. .net GUI框架

    十大开源的.NET用户界面框架 让GUI设计不再犯难 选择一款合适的GUI框架是.NET开发中比较重要但又很棘手的问题,因为用户界面相当于一款应用的"门面",直接面向用户.好的UI ...

  5. 【转】ArcGIS API for Silverlight/WPF 2.1学习笔记（一）

    源自:http://blog.163.com/zwx_gis/blog/static/32434435201122193611576/ (主页:http://blog.163.com/zwx_gis/ ...

  6. Linux : 密码正确不能正常登陆，日志提示Could not get shadow information for user

    今天,再玩Centos7的时候,尝试修改了下ssh的端口.因为默认开启了SELinux,如果没有修改这个文件配置就修改端口sshd服务就不能正常启动了. 但是,当我修改会22端口的时候还是不能正常登陆 ...

  7. Confluence 6 设置公共访问备注

    你不能为匿名用户赋予空间管理员或者限制权限. 你可以让用户自行注册你的 Confluence 站点,同时也可以选择其他的用户注册选项,比如邀请用户注册等.请查看:Add and Invite User ...

  8. Fair CodeForces - 987D (bfs)

    链接 大意:给定无向图边权均为1, 每个节点有一种货物, 对于每个节点, 求出拿到$s$种不同货物的最短距离 (每种货物独立计算,并且不用返回) 因为$s$较小, 直接枚举每种货物即可 所以问题就转化 ...

  9. bzoj1202: [HNOI2005]狡猾的商人 floyd

    刁姹接到一个任务,为税务部门调查一位商人的账本,看看账本是不是伪造的.账本上记录了n个月以来的收入情况,其中第i 个月的收入额为Ai(i=1,2,3...n-1,n), .当 Ai大于0时表示这个月盈 ...

  10. UVA-10020 Minimal coverage（贪心）

    题目大意:在x轴上,给一些区间,求出能把[0,m]完全覆盖的最少区间个数及该情形下的各个区间. 题目分析:简单的区间覆盖问题.可以按这样一种策略进行下去:在所有区间起点.长度有序的前提下,对于当前起点 ...