Created
November 26, 2013 11:02
-
-
Save alanerzhao/7656612 to your computer and use it in GitHub Desktop.
标签选择
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| body{ | |
| font-size:12px; | |
| } | |
| .hover{ | |
| background: #007EDF; | |
| color:#fff; | |
| padding:2px; | |
| text-decoration:none; | |
| border-radius:3px; | |
| } | |
| a{ | |
| text-decoration:none; | |
| color:#2B333F; | |
| } | |
| ul { | |
| list-style:none; | |
| margin:0; | |
| padding:0; | |
| padding: 10px 10px; | |
| } | |
| .tags-bd { | |
| margin-right: 6px; | |
| background: #3A9F10; | |
| border-radius:3px; | |
| padding:2px; | |
| font-size:12px; | |
| color:#fff; | |
| float:left; | |
| width:50px; | |
| text-align:center; | |
| } | |
| .radio-bd { | |
| //background: #E52121 !important; | |
| } | |
| .clearfix:after { content:'\0020';display:block;clear:both;height:0;} | |
| .clearfix {*zoom:1;} | |
| .tags-bd span { | |
| cursor:pointer | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <td> | |
| <ul class="J_radio clearfix" style="display:block;clear:both;"> | |
| <li style="float:left;"> | |
| 画面类型 | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="1-5" class="linktag hover"> | |
| 2D | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="1-6" class="linktag"> | |
| 3D | |
| </a> | |
| </li> | |
| </ul> | |
| <ul class="J_radio clearfix" style="display:block;clear:both;"> | |
| <li style="float:left;"> | |
| 联网模式 | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="3-18" class="linktag"> | |
| 单机 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="3-21" class="linktag"> | |
| 网游 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="3-96" class="linktag"> | |
| 弱联网 | |
| </a> | |
| </li> | |
| </ul> | |
| <ul class="J_multiple clearfix" style="display:block;clear:both;"> | |
| <li style="float:left;"> | |
| 游戏类型 | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="82-83" class="other"> | |
| 其它 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-17" class="linktag"> | |
| 动作 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-56" class="linktag"> | |
| 策略 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-15" class="linktag"> | |
| 角色扮演 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-52" class="linktag"> | |
| 射击 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-55" class="linktag"> | |
| 竞速 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-48" class="linktag"> | |
| 飞行 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-51" class="linktag"> | |
| 体育 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-46" class="linktag"> | |
| 解谜 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-50" class="linktag"> | |
| 休闲 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-41" class="linktag"> | |
| 其它 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-45" class="linktag"> | |
| 社交 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-54" class="linktag"> | |
| 益智 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-44" class="linktag"> | |
| 横版过关 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="2-64" class="linktag"> | |
| 音乐 | |
| </a> | |
| </li> | |
| </ul> | |
| <ul class="J_multiple clearfix" style="display:block;clear:both;"> | |
| <li style="float:left;"> | |
| 游戏画风 | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="82-83" class="other"> | |
| 其它 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-70" class="linktag hover"> | |
| Q版 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-62" class="linktag"> | |
| 日漫 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-99" class="linktag"> | |
| 美漫 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-97" class="linktag"> | |
| 唯美 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-100" class="linktag"> | |
| 萌系 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-98" class="linktag"> | |
| 治愈 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-101" class="linktag"> | |
| 血腥 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-72" class="linktag"> | |
| 写实 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-77" class="linktag"> | |
| 抽象 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-71" class="linktag"> | |
| 像素 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-75" class="linktag"> | |
| 水墨 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="93-91" class="linktag"> | |
| 手绘 | |
| </a> | |
| </li> | |
| </ul> | |
| <ul class="J_multiple clearfix" style="display:block;clear:both;"> | |
| <li style="float:left;"> | |
| 游戏主题 | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-10" class="other"> | |
| 其它 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-10" class="linktag"> | |
| 武侠 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-102" class="linktag"> | |
| 三国 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-108" class="linktag"> | |
| 西游 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-106" class="linktag"> | |
| 水浒 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-11" class="linktag"> | |
| 魔幻 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-107" class="linktag"> | |
| 玄幻 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-79" class="linktag"> | |
| 科幻 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-80" class="linktag"> | |
| 穿越 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-78" class="linktag"> | |
| 西部 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-90" class="linktag"> | |
| 生活 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-104" class="linktag"> | |
| 商业 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-8" class="linktag"> | |
| 战争 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-105" class="linktag"> | |
| 拟真 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-81" class="linktag"> | |
| 搞怪 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-57" class="linktag"> | |
| 恐怖 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-103" class="linktag"> | |
| 动感 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="4-13" class="linktag"> | |
| 音乐舞蹈 | |
| </a> | |
| </li> | |
| </ul> | |
| <ul class="J_multiple clearfix" style="display:block;clear:both;"> | |
| <li style="float:left;"> | |
| 游戏角色 | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="82-83" class="other"> | |
| 其它 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-110" class="linktag"> | |
| 僵尸 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-121" class="linktag"> | |
| 骑士 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-120" class="linktag"> | |
| 飞行器 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-119" class="linktag"> | |
| 车辆 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-118" class="linktag"> | |
| 船舶 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-117" class="linktag"> | |
| 美女 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-116" class="linktag"> | |
| 机械 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-115" class="linktag"> | |
| 忍者 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-114" class="linktag"> | |
| 帅哥 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-113" class="linktag"> | |
| 壮汉 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-112" class="linktag"> | |
| 吸血鬼 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-111" class="linktag"> | |
| 儿童 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-109" class="linktag"> | |
| 上班族 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="94-122" class="linktag"> | |
| 黑道 | |
| </a> | |
| </li> | |
| </ul> | |
| <ul class="J_multiple clearfix" style="display:block;clear:both;"> | |
| <li style="float:left;"> | |
| 游戏玩法 | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="82-83" class="other"> | |
| 其它 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-43" class="tagItem"> | |
| 塔防 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-16" class="linktag"> | |
| 卡牌 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-14" class="linktag"> | |
| 三消 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-47" class="linktag"> | |
| 跑酷 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-12" class="linktag"> | |
| 赛车 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-59" class="linktag"> | |
| 飞行 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-60" class="linktag"> | |
| 航海 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-42" class="linktag"> | |
| 养成 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-49" class="linktag"> | |
| 经营 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-9" class="linktag"> | |
| 格斗 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-53" class="linktag"> | |
| 棋牌 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-126" class="linktag"> | |
| 球类 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-125" class="linktag"> | |
| 合体 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-124" class="linktag"> | |
| 下落 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-123" class="linktag"> | |
| 上升 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="95-127" class="linktag"> | |
| 连线 | |
| </a> | |
| </li> | |
| </ul> | |
| <ul class="J_radio clearfix tafangList" style="display:none;clear:both;"> | |
| <li style="float:left;"> | |
| 塔防玩法 | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="82-83" class="other"> | |
| 其它 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="85-86" class="linktag"> | |
| 固定路线 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="85-87" class="linktag"> | |
| 摆阵堵怪 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="85-88" class="linktag"> | |
| 横版地形 | |
| </a> | |
| </li> | |
| <li style="float:left;padding-left:3px;"> | |
| <a href="javascript:;" data="85-89" class="linktag"> | |
| 另类塔防 | |
| </a> | |
| </li> | |
| </ul> | |
| <ul id="add_othors_tags" class="list-dot-othors clearfix"> | |
| </ul> | |
| <ul style="display:none;"> | |
| <li id="add_othor_tag" class="tags-bd" style="display:none;"> | |
| <input type="hidden" name="info[linktag][]" value=""> | |
| <span onclick="remove_tag(this)"></span> | |
| <!--<a onclick="remove_tag(this)" class="close" href="javascript:;"></a>--> | |
| </li> | |
| </ul> | |
| </td> | |
| </tr> | |
| <a href="javascript:;" id="aaa">aaa</a> | |
| </table> | |
| <script type="text/javascript" src="./jquery.js"></script> | |
| <script type="text/javascript"> | |
| //tag page | |
| (function() { | |
| var J_radio = $(".J_radio"), | |
| J_multiple = $(".J_multiple"), | |
| RadioLinktag = J_radio.find(".linktag"), | |
| MultipleLinktag = J_multiple.find(".linktag"); | |
| var len = $(".J_radio").length; | |
| $("ul").not($("#add_othors_tags")).each(function (idx) { | |
| if(idx % 2 == 0) { | |
| $(this).css("background","#eee"); | |
| } | |
| }) | |
| $("#aaa").click(function () { | |
| var isAllSelected = true; | |
| $('.J_multiple, .J_radio').each(function(v, i) { | |
| if($(i).is(":visible")) { | |
| var a = $(i).find('.hover'); | |
| return isAllSelected = !!a.length; | |
| } | |
| }); | |
| if(isAllSelected) { | |
| console.log("选完了"); | |
| //return false; | |
| } else { | |
| console.log('请选择=' + isAllSelected); | |
| } | |
| }) | |
| //radio 单选 | |
| RadioLinktag.bind("click", function() { | |
| var a = $('#add_othor_tag').clone(true); | |
| a.addClass("radio-bd"); | |
| tag_id = $(this).attr('data'), | |
| tag_name = $(this).html(), | |
| self = $(this); | |
| a.attr('id', ''); | |
| a.css('display', 'inline'); | |
| a.children('span').html(tag_name); | |
| a.children('input').val(tag_id); | |
| //上边点击属性 | |
| var dataType = parseInt(self.attr("data")); | |
| if($("#"+dataType).text() ==""){ | |
| a.attr("id",dataType); | |
| $('#add_othors_tags').append(a); | |
| } else { | |
| $('#'+dataType).html(a.html()); | |
| } | |
| $(this).addClass("hover").parent().siblings().find("a").removeClass("hover"); | |
| }) | |
| //其它 | |
| $(".other").each(function () { | |
| var self = $(this); | |
| self.click(function () { | |
| $(".linktag",self.parents("ul")).removeClass("hover"); | |
| $("#add_othors_tags li").each(function(idx, obj) { | |
| var dataOne = parseInt(($(obj).find("input").val())); | |
| var dataTwo = parseInt(self.parent().next().children().attr("data")); | |
| if(dataOne == dataTwo) { | |
| $(this).remove(); | |
| } | |
| }) | |
| }) | |
| }) | |
| //自动选择 | |
| $(".J_radio .linktag").each(function (idx,obj) { | |
| if($(obj).hasClass("hover")) { | |
| var a = $('#add_othor_tag').clone(true); | |
| a.addClass("radio-bd"); | |
| tag_id = $(this).attr('data'), | |
| tag_name = $(this).html(); | |
| self = $(this); | |
| a.attr('id', ''); | |
| a.css('display', 'inline'); | |
| a.children('span').html(tag_name); | |
| a.children('input').val(tag_id); | |
| //上边点击属性 | |
| var dataType = parseInt(self.attr("data")); | |
| if($("#"+dataType).text() ==""){ | |
| a.attr("id",dataType); | |
| $('#add_othors_tags').append(a); | |
| } else { | |
| $('#'+dataType).html(a.html()); | |
| } | |
| $(this).addClass("hover").parent().siblings().find("a").removeClass("hover"); | |
| } | |
| }) | |
| $(".J_multiple .linktag").each(function (idx,obj) { | |
| if($(obj).hasClass("hover")) { | |
| var a = $('#add_othor_tag').clone(true); | |
| a.addClass("radio-bd"); | |
| tag_id = $(this).attr('data'), | |
| tag_name = $(this).html(); | |
| self = $(this); | |
| a.attr('id', ''); | |
| a.css('display', 'inline'); | |
| a.children('span').html(tag_name); | |
| a.children('input').val(tag_id); | |
| $('#add_othors_tags').append(a); | |
| } | |
| }) | |
| //multiple | |
| MultipleLinktag.bind('click', function() { | |
| var self = $(this), | |
| a = $('#add_othor_tag').clone(true), | |
| tag_id = $(this).attr('data'), | |
| tag_name = $(this).html(), | |
| str = $('#add_othors_tags').children().text(), | |
| f = str.match(tag_name); | |
| a.attr('id', ''); | |
| a.css('display', 'inline'); | |
| a.children('span').html(tag_name); | |
| a.children('input').attr('value', tag_id); | |
| if (!f && tag_name != '0') { | |
| $('#add_othors_tags').append(a); | |
| //$('#add_othors_tags'). | |
| } | |
| $(this).toggleClass("hover"); | |
| if (!$(this).hasClass("hover")) { | |
| //todo | |
| $("#add_othors_tags li").each(function(idx, obj) { | |
| if ($(this).find("span").text() == self.text()) { | |
| $(this).remove(); | |
| } | |
| }) | |
| } | |
| }); | |
| //塔防 | |
| $(".tagItem").click(function () { | |
| $(".tafangList").toggle(); | |
| }) | |
| })(); | |
| //删除 | |
| function remove_tag(curr) { | |
| var curr = $(curr); | |
| curr.parent().remove(); | |
| $(".J_multiple li,.J_radio li").each(function(idx, obj) { | |
| if ($(this).find("a").text() == curr.text()) { | |
| // console.log($(this)) | |
| $(this).find("a").removeClass("hover"); | |
| } | |
| }) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment