本文介绍如何使用HTML、CSS和jQuery制作美观的网页标签界面。通过原生Checkbox模拟标签样式，利用CSS调整颜色、字体和间距，并结合jQuery实现点击切换与数据读取功能，解决原生控件美观度不足的问题，适用于后台管理及博客发布等场景。
标签界面美化概述
在ABROAD项目中使用了标签功能，这种元素在Web开发中十分常见。如图所示，依次展示了DCC文章发布器、ABROAD后台数据添加、百度图片搜索以及SF博客发布时贴标签的样式。标签的作用类似于浏览器中原生的checkbox，但由于原生checkbox外观较为简陋，因此采用以下简单方法进行美化处理。
HTML结构实现
首先准备HTML结构代码：
<span class="tags">
<span>经济、金融类</span>
<span>行政、人资类</span>
<span class="active">市场、销售类</span>
<span>电子工程IT类</span>
<span class="active">工程类</span>
<span>生物医药类</span>
<span>物理、化学类</span>
<span>广告、传媒类</span>
<span>语言、翻译类</span>
</span>
CSS样式定义
接着编写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;
}
jQuery交互逻辑
最后编写JS交互代码（数据提取逻辑可根据实际需求调整；此处使用了jquery库）：
// 绑定标签点击事件 @ 2014-01-29 21:57:26
$('.tags span').on('click', function(){
$(this).toggleClass('active');
});
// 读取标签数据时 @ 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('请至少选择一个专业标签');
return;
}