标签用于编写扩展项目。事实上，标签在网络上随处可见。图为DCC文章发布者，Expand后台添加数据，百度图片搜索，顺丰发布博客文章时的标注风格。——标签就像浏览器里原来的复选框一样，但是复选框真的很丑，就用这个简单的方法美化一下吧。

1.HTML代码：

spanclass='tags '

跨越经济和金融/跨越

span管理和人力资源/span

Spanclass='活跃'市场和销售类别/span

span电子工程信息技术类/span

Spanclass='active '工程类/span

Span生物医学类别/span

物理和化学/span

广告和媒体/span

跨语言和翻译/跨

/span

2.CSS代码(自行调整颜色、字号、间距):

/*标签样式*/。tagsspan {

font :12 px/22 px ' microsoftyahei '，Arial，LucidaGrande，Tahoma

border :1 px # E3e0d 9 solid；

display : inline-block；

height:20px

背景： # FFF；

text-align : center；

padding:2px7px

margin:1px4px

cursor:pointer指针；

-web kit-transit : all . 3 ease-in-out；

-moz-transit : all . 3 ease-in-out；

飞越：隐藏；

color: # 989898

}

. tagsspan:hover {

边框颜色： # 00956d；

}

. tags pan . active {

color : # FFF；

边框颜色： # 00956d；

背景色： # 00956d；

}

3.JS代码(代码也根据自己的需要提取数据；原谅我放荡不羁的使用jquery库~):

//绑定标签点击事件@2014-01-2921:57:26

$('.tagsspan ')。on('click '，function(){

$(这个)。toggle class(' active ')；

});

//读取标签数据时@ 2923:12336035。

vartag_content='，'；

$('.tagsspan ')。每个(函数(k，v){

if($(v)。has class(' active '){

tag_content=$(v)。text()'，'；

}

});

if(tag_content=='，'){

提醒('请至少选择一个专业标签')；

返回；

}

本文转载自中文网站