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

代码：

 <!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. gpg: no valid OpenPGP data found. 解决办法

    在Ubuntu14.04 server(amd64)上面安装ros,运行命令 wget http://packages.ros.org/ros.key -O - | sudo apt-key add ...

  2. spring与shiro的集成

    web.xml中的配置: <!-- The filter-name matches name of a 'shiroFilter' bean inside applicationContext. ...

  3. 测序中Q20 Q30 Q40

    你能给别人讲清楚这个概念吗? 二代测序中,每测一个碱基会给出一个相应的质量值,这个质量值是衡量测序准确度的.碱基的质量值13,错误率为5%,20的错误率为1%,30的错误率为0.1%.行业中Q20与Q ...

  4. LeetCode--100--相同的树

    问题描述: 给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [1,2, ...

  5. codeforces 853b//Jury Meeting// Codeforces Round #433 (Div. 1)

    题意:几个人要去一个城市k天,现给出各航班的日期和花费,让这n个人能相会k天的最小花费? 用数组arr1[i]记录在第i天人到齐的最小花费.arr2[i]记录第i天之后才有人开始走的最小花费.然后取a ...

  6. codeforces 547c// Mike and Foam// Codeforces Round #305(Div. 1)

    题意:给出数组arr和一个空数组dst.从arr中取出一个元素到dst为一次操作.问每次操作后dst数组中gcd等于1的组合数.由于数据都小于10^6,先将10^6以下的数分解质因数.具体来说从2开始 ...

  7. Jenkins安装以及邮件配置

    Jenkins介绍 Jenkins是一个java开发的.开源的.非常好用持续集成的工具,它能帮我们实现自动化部署环境.测试.打包等等的工作,还可以在构建任务成功或者失败之后给我们发邮件通知. 什么叫持 ...

  8. 2-24-源码编译搭建LAMP环境-作业 ( By 小甘丶 )

    安装上课的内容要求: 实验环境: VMware Virtual Machine : System Version: CentOS6.8 ( Gan35 ) IP Address : 192.168.3 ...

  9. ubuntu svn二进制文件

    1. 查找2:04时间的日志文件和position. Ps:这里假设我找到的是 mysql-bin.000065 位置开始为1356. 2  复制最近的几个日志文件,从mysql-bin.000065 ...

  10. 通过一个uri获取一个Bitmap对象

    Android 开发过程中,可能会用到的,通过一个uri获取一个Bitmap对象 private Bitmap getBitmapFromUri(Uri uri){  try  {   // 读取ur ...