页面展示：
代码实现：
<!doctype html> <html> <meta charset="utf-8"> <title>jQuery制作tag标签添加和删除</title> <link rel="stylesheet" type="text/css" href="label/jquerytagsinput/css/jquery.tagsinput.css" /> <script type="text/javascript" src="label/jquery-1.10.2/jquery.js"></script> <script type="text/javascript" src="label/jquerytagsinput/js/jquery.tagsinput.js"></script> <script type="text/javascript" src="label/jquery-ui/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="label/jquery-ui/jquery-ui.min.css" /> <script type="text/javascript"> function onAddTag(tag) { alert("添加标签: " + tag); } function onRemoveTag(tag) { alert("Removed a tag: " + tag); } function onChangeTag(input,tag) { alert("Changed a tag: " + tag); } $(function() { // 使用importTags函数导入标签列表 $('#tags_1').importTags('黄色,蓝色,绿色,白色'); $('#tags_2').importTags('yellow,blue,green,white'); $('#tags_1').tagsInput({'auto', onChange: function(elem, elem_tags){ // 初始化颜色 $('.tag').css('background-color', '#87CEFA') } }); $('#tags_2').tagsInput({ 'auto', onChange: function(elem, elem_tags) { var color = ['yellow']; $('.tag', elem_tags).each(function() { if($(this).text().search(new RegExp('\b(' + color.join('|') + ')\b')) >= 0) $(this).css('background-color', 'yellow'); }); var color = ['blue']; $('.tag', elem_tags).each(function() { if($(this).text().search(new RegExp('\b(' + color.join('|') + ')\b')) >= 0) $(this).css('background-color', 'blue'); }); var color = ['green']; $('.tag', elem_tags).each(function() { if($(this).text().search(new RegExp('\b(' + color.join('|') + ')\b')) >= 0) $(this).css('background-color', 'green'); }); var color = ['white']; $('.tag', elem_tags).each(function() { if($(this).text().search(new RegExp('\b(' + color.join('|') + ')\b')) >= 0) $(this).css('background-color', 'white'); }); } }); }); </script> <form> <p><label>标签</label> <input id="tags_1" type="text" class="tags" value="黄色,蓝色,绿色,白色" /></p> <p><label>标签颜色归类</label> <input id="tags_2" type="text" class="tags" value="yellow,blue,green,white" /></p> </form> </body> </html>
其他功能：
// 重置标签列表 $('#tags').importTags(''); // 判断标签是否存在 if ($('#tags_1').tagExist('蓝色')) { } // 调用addTag（）和removeTag（）函数来添加和删除 $('#tags_1').addTag('紫色'); $('#tags_1').removeTag('绿色');
插件参考：
链接：https://pan.baidu.com/s/1AdewGCSUj_sK7gikc_xAAQ
提取码：gtbd