寫(xiě)ABROAD項(xiàng)目用到了標(biāo)簽這個(gè)東東，其實(shí)標(biāo)簽在WEB上到處可見(jiàn)，圖中就依次顯示了DCC文章發(fā)布器、ABROAD后臺(tái)添加數(shù)據(jù)、百度圖片搜索、sf發(fā)布博客文章時(shí)貼標(biāo)簽的樣式――標(biāo)簽就像瀏覽器里原生的checkbox一樣，不過(guò)checkbox實(shí)在太丑了，就使用這個(gè)簡(jiǎn)單方法美化一下好了。
1、HTML代碼：
<span class="tags"> <span>經(jīng)濟(jì)、金融類(lèi)</span> <span>行政、人資類(lèi)</span> <span class="active">市場(chǎng)、銷(xiāo)售類(lèi)</span> <span>電子工程IT類(lèi)</span> <span class="active">工程類(lèi)</span> <span>生物醫(yī)藥類(lèi)</span> <span>物理、化學(xué)類(lèi)</span> <span>廣告、傳媒類(lèi)</span> <span>語(yǔ)言、翻譯類(lèi)</span></span>
2、CSS代碼（顏色、字體大小、間距自行調(diào)整）：
/* 標(biāo)簽樣式 */.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代碼（代碼也是根據(jù)自己的需求提取數(shù)據(jù)；原諒我放蕩不羈使用了jquery庫(kù)~）：
// 綁定標(biāo)簽點(diǎn)擊事件 @ 2014-01-29 21:57:26$('.tags span').on('click', function(){ $(this).toggleClass('active');}); // 讀取標(biāo)簽數(shù)據(jù)時(shí) @ 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('請(qǐng)至少選擇一個(gè)專(zhuān)業(yè)標(biāo)簽'); return;}新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
