ABROAD：HTML+CSS+JS打造簡(jiǎn)單標(biāo)簽效果

tinyq 發(fā)布于2019-08-28 17:54 / 3453人閱讀

摘要：之前復(fù)制了好久，打強(qiáng)調(diào)字也打了好久。。。還是寫一下文章同步自大超超在思考。

寫ABROAD項(xiàng)目用到了標(biāo)簽這個(gè)東東，其實(shí)標(biāo)簽在WEB上到處可見，圖中就依次顯示了DCC文章發(fā)布器、ABROAD后臺(tái)添加數(shù)據(jù)、百度圖片搜索、sf發(fā)布博客文章時(shí)貼標(biāo)簽的樣式——標(biāo)簽就像瀏覽器里原生的checkbox一樣，不過(guò)checkbox實(shí)在太丑了，就使用這個(gè)簡(jiǎn)單方法美化一下好了。

1、HTML代碼：


    經(jīng)濟(jì)、金融類
    行政、人資類
    市場(chǎng)、銷售類
    電子工程IT類
    工程類
    生物醫(yī)藥類
    物理、化學(xué)類
    廣告、傳媒類
    語(yǔ)言、翻譯類

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:35
var tag_content = ",";
$(".tags span").each(function(k, v) {
    if($(v).hasClass("active")){
        tag_content += $(v).text()+",";
    }
});
if( tag_content=="," ){
    alert("請(qǐng)至少選擇一個(gè)專業(yè)標(biāo)簽");
    return;
}

尼妹！！原來(lái)markdown支持直接寫html代碼。。。。之前復(fù)制了好久，打強(qiáng)調(diào)字也打了好久。。。
好吧。。。
還是寫一下文章同步自：大超超在思考。