大家好，下面小编给大家分享一下。很多人还不知道如何在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"><!--<labeldata-type="1">阿萨德</label>--></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设置标签样式。这篇文章已经分享到这里了，希望对大家有所帮助。如果信息有误，请联系边肖进行更正。