寫ABROAD項目用到了標簽這個東東，其實標簽在WEB上到處可見，圖中就依次顯示了DCC文章發布器、ABROAD后臺添加數據、百度圖片搜索、sf發布博客文章時貼標簽的樣式——標簽就像瀏覽器里原生的checkbox一樣，不過checkbox實在太丑了，就使用這個簡單方法美化一下好了。

1、HTML代碼：

 span >
2、CSS代碼（顏色、字體大小、間距自行調整）：
/* 標簽樣式 */.tags span { font: 12px/22px Microsoft Yahei ,Arial,Lucida Grande,Tahoma; border: 1px #E3E0D9 solid; display: inline-block; height: 20px; background: #FFF; text-align: center; padding: 2px 7px; margin: 1px 4px; cursor: pointer; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; overflow: hidden; color: #989898;.tags span:hover { border-color: #00956d;.tags span.active { color: #FFF; border-color: #00956d; background-color: #00956d;}
3、JS代碼（代碼也是根據自己的需求提取數據；原諒我放蕩不羈使用了html' target='_blank'>jquery庫~）：
// 綁定標簽點擊事件 @ 2014-01-29 21:57:26$( .tags span ).on( click , function(){ $(this).toggleClass( active // 讀取標簽數據時 @ 2014-01-29 23:12:35var tag_content = , $( .tags span ).each(function(k, v) { if($(v).hasClass( active )){ tag_content += $(v).text()+ , if( tag_content== , ){ alert( 請至少選擇一個專業標簽  return;}
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！
相關推薦：
HTML5實現使用按鈕控制背景音樂開關的方法
Html和css實現純文字和帶圖標的按鈕的代碼
以上就是用HTML和CSS以及JS制作簡單的網頁菜單界面的代碼的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。