js设置标签样式

文章插图
点击按钮出现相应的值，如点击btn1出现show1;show里面显示最多出现四个，即点击btn里任意多个，在show里只显示四个，其余隐藏
选项卡单击以添加自定义的渲染。
需求分析:
被点击的选项/标签需要显示在指定的容器中，容器最多只能显示四个被点击的选项/标签，多余的可以删除第一个或最后一个，以便加载最新的。
这类似于旅游网站，可以自定义相关选项(条件) ，达到按条件搜索的目的。
解决方案:
Css样式
<styletype="text/css">ul,li{list-style:none;margin:0;padding:0}#showBoxlabel{display:inline-block;padding:3px5px;background-color:#fffddd;border:1pxdashed#f60}#itemBoxli{float:left;height:40px;line-height:40px;padding:010px;margin:10px10px00;text-align:center;background-color:#690;border:1pxsolid#333;color:#fff}</style>Html结构(实际操作需要动态加载数据)
<pid="showBox"></p><ulid="itemBox"><lidata-type="1">机票</li><lidata-type="2">酒店</li><lidata-type="3">打车</li><lidata-type="4">签证</li><lidata-type="5">旅游</li><lidata-type="6">娱乐</li></ul>基于Jquery的程序(记得介绍jquery库文件)
<scripttype="text/javascript">$(function(){$("#itemBox").find("li").click(function(){varitemName=$(this).text();varitemType=$(this).attr("data-type");varlabelHtml='<labeldata-type="'+itemType+'">'+itemName+'</label>';$showBox=$("#showBox");$showItem=$showBox.find("label");if($showItem.length<4){varisHave=false;$showItem.each(function(){if($(this).attr("data-type")==itemType){alert("该项已经添加过!");isHave=true;returnfalse;}})if(!isHave){$showBox.append('<labeldata-type="'+itemType+'">'+itemName+'</label>')}}else{if($showBox.find("label[data-type="+itemType+"]").length==0){$showItem.eq(0).remove();//第一个移除//$label.eq(3).remove();//最后个移除$showBox.append(labelHtml)}else{alert("该项已经添加过!");returnfalse;}}})})</script>感谢您对大销售网的支持！如有疑问，欢迎留言！
【js设置标签样式】以上解释了js设置标签样式。这篇文章已经分享到这里了，希望对大家有所帮助。