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

代码：

 <!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. 哈希表-java

    import java.util.HashMap; import java.util.Iterator; public class JavaHashMap { public static void m ...

  2. 退出shell 脚本

    #!/bin/bash export TOP_PID=$$ trap 'exit 1' TERM exit_script(){ kill -s TERM $TOP_PID } echo "b ...

  3. Python day13文件的读写

    # 文件操作 f=open("E:\\1.txt",encoding="GBK")#打开文件 print(f.writable())#是否可写 print(f. ...

  4. selenium_webdriver(python)获取元素属性值，浏览器窗口控制、网页前进后退，title/url打印

    <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...

  5. c++ primer plus 第四章 课后题答案

    #include<iostream> #include<string> using namespace std; int main() { string first_name; ...

  6. Java 密码扩展无限制权限策略文件[转]

    因为某些国家的进口管制限制,Java发布的运行环境包中的加解密有一定的限制.比如默认不允许256位密钥的AES加解密,解决方法就是修改策略文件. 官方网站提供了JCE无限制权限策略文件的下载: JDK ...

  7. http和WebSocket

    有关http和WebSocket 的区别网上有很多的质料. 个人在此仅仅是记录以下自己的学习心得,自己的理解. 1. http协议是用在应用层的协议,他是基于tcp协议的,http协议建立链接也必须要 ...

  8. js-Client-side web APIs

    APIs https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/ 简介: 应用程序接口(API) ...

  9. synchronized锁普通方法和锁静态方法

    1.对象锁钥匙只能有一把才能互斥,才能保证共享变量的唯一性 2.在静态方法上的锁,和 实例方法上的锁,默认不是同样的,如果同步需要制定两把锁一样. 3.关于同一个类的方法上的锁,来自于调用该方法的对象 ...

  10. utime修改文件的存取，修改时间

    #include <sys/types.h> #include <utime.h> int utime(const char *filename, const struct u ...