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

代码：

 <!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. 3：JavaScript中的各类语句

    上面我们说完了数据类型和基本运算  下面说的就是各种类型的语句 --- ---------------------------------------------------------------- ...

  2. Linux——GRUB简单学习笔记

    GRUB的配置文件默认为  :/boot/grub/grub.conf # ls -l /etc/grub.conf GRUB配置选项: default定义缺省启动系统 timeout定义缺省等待时间 ...

  3. 机器学习 MLIA学习笔记（一）

    监督学习(supervised learning):叫监督学习的原因是因为我们告诉了算法,我们想要预测什么.所谓监督,其实就是我们的意愿是否能直接作用于预测结果.典型代表:分类(classificat ...

  4. python 将列表中的字符串转为数字

    本文实例讲述了Python中列表元素转为数字的方法.分享给大家供大家参考,具体如下: 有一个数字字符的列表: numbers = ['1', '5', '10', '8'] 想要把每个元素转换为数字: ...

  5. http 相关文章

    1. 百度百科 2.http | MDN 3.协议讲解 4.经典题 5.http与https的区别 6. http服务器返回状态总结 7.网络七层协议 开放式系统互联参考模型(OSI)的7层从上到下分 ...

  6. input聚焦后光标移动至末尾

    var valSrc=obj.val();obj.val(“”).focus().val(valSrc);

  7. 正则表达式中 (?=pattern) (?!pattern) (?<=pattern) (?<!pattern) 的使用

    2018-08-06 12:33:58 StackOverFlow上有个如下的问题: 这里就会用到正向肯定预查(?=pattern):

  8. Jquery实现光棒效果

    <script type="text/javascript"> $(function () { var $bac; $("#d1 tr").hove ...

  9. 3.3 x86指令简介

    计算机组成 3 指令系统体系结构 3.3 x86指令简介 x86指令种类繁多,数量庞大.在这一节我们将会学习x86指令的分类,并分析其中最为基础的一部分指令. 通常一个指令系统主要包括这几类指令.运算 ...

  10. HDU-3507 Print Article （斜率优化）

    题目大意:将n个数分成若干个区间,每个区间的代价为区间和的平方加上一个常数m,求最小代价. 题目分析:定义状态dp(i)表示前 i 个数已经分好的最小代价,则状态转移方程为 dp(i)=min(dp( ...