1. 首頁 > 生活經驗 > >

js設置標簽樣式

知識經驗


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設置標簽樣式】以上解釋了js設置標簽樣式 。這篇文章已經分享到這里了，希望對大家有所幫助 。