标签切换（下部内容区跟着切换）： 2016-6-2
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.res-head .btn').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var idx = $(this).index(); $('.res-body .res-con').eq(idx).addClass('active').siblings().removeClass('active'); }); }); </script> <style type="text/css"> .clearfix:after{display:block;content:'';height:0;overflow:hidden;clear:both;} .res-head{margin:0 auto;width:244px;} .res-head .btn{display:block;float:left;width:120px;height:34px;line-height:34px;font-size:14px;text-align:center;color:#333;border:1px solid #ccc;cursor:pointer;} .res-head .btn.active{background:#ff7200;color:#fff;border:1px solid #ff7200;} .res-head .btn-base{border-right:none!important;} .res-head .btn-fine{border-left:none!important;} .res-body .res-con{display:none;} .res-body .res-con.active{display:block;} </style> <div class="res-head clearfix"> <a class="btn btn-base active">简装</a> <a class="btn btn-fine">精装</a> </div> <div class="res-body clearfix"> <div class="res-con active"> 内容区域111111 </div> <div class="res-con"> 内容区域22222 </div> </div>
http://www.cnblogs.com/aliyue/archive/2016/06/06/5563334.html 刮刮卡效果 2016-6-6
趣味标签色卡： 2016-6-13
用js生成不重复随机数组，随机控制标签的颜色
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ if ($('.colors-box').length>0){ var tmpcolor_len = $('.colors-box .colors').length; var tmpcolor_ary = new Array(tmpcolor_len); for (var i=0;i<tmpcolor_len;i++){ tmpcolor_ary[i]=i; } tmpcolor_ary.sort(function(){ //不重复的随机数组 return 0.5-Math.random(); }); //alert(tmpcolor_ary); for (var i=0;i<tmpcolor_len;i++){ $('.colors-box').find('.colors').eq(i).addClass('colors'+tmpcolor_ary[i]); } } }); </script> <style type="text/css"> .colors-box .colors{display:inline-block;padding:0 10px;color:#fff;height:32px;line-height:32px;margin-right:20px;margin-bottom:20px;font-family:'微软雅黑';font-size:14px;} .colors-box .colors0{background:#5ca1f5;} .colors-box .colors1{background:#32c29b;} .colors-box .colors2{background:#ea5df3;} .colors-box .colors3{background:#f76584;} .colors-box .colors4{background:#f27f47;} .colors-box .colors5{background:#e7bc10;} .colors-box .colors6{background:#52bd2d;} </style> <div class="colors-box"> <span class="colors">已阅！握爪！</span> <span class="colors">32个赞！</span> <span class="colors">膜拜</span> <span class="colors">阅后即醉</span> <span class="colors">任性！</span> <span class="colors">干货！</span> <span class="colors">高大上</span> </div>
<ul><li>列表 （左侧糖葫芦串：绿色小圆点） 2016-6-21
<style type="text/css"> ul,li{margin:0;padding:0;list-style:none;} .chuan-list{width:150px;padding-left:10px;} .chuan-list .chuan-item{position:relative;font-size:14px;line-height:24px;padding:0 0 20px 20px;border-left:1px solid #1bbc9b;font-family:'微软雅黑';} .dot{position:absolute;width:20px;height:20px;left:-10px;top:2px;background:#1bbc9b;color:#fff;font-family:'Arial';text-align:center;line-height:20px;font-size:12px;border-radius:50%;} </style> </head> <body> <ul class="chuan-list"> <li class="chuan-item"><span class="dot">1</span>啊啊啊啊</li> <li class="chuan-item"><span class="dot">2</span>啊啊啊啊</li> <li class="chuan-item"><span class="dot">3</span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li> <li class="chuan-item"><span class="dot">4</span>啊啊啊啊</li> <li class="chuan-item"><span class="dot">5</span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li> </ul>
待补充...