自定义标签选择器_css选择自定义标签-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义标签选择器</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 30px auto;
padding: 25px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.tag-section {
margin-bottom: 30px;
}
.section-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #34495e;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.tag {
display: inline-flex;
align-items: center;
padding: 8px 15px;
background-color: #e0e0e0;
border-radius: 20px;
color: #333;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
user-select: none;
}
.tag:hover {
background-color: #d0d0d0;
}
.tag.selected {
background-color: #3498db;
color: white;
}
.tag.selected .remove-tag {
color: white;
}
.tag-input-container {
display: flex;
margin-top: 20px;
}
#tagInput {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 14px;
outline: none;
}
#addTagBtn {
padding: 10px 15px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.2s;
}
#addTagBtn:hover {
background-color: #27ae60;
}
.remove-tag {
margin-left: 8px;
color: #777;
font-size: 12px;
cursor: pointer;
transition: color 0.2s;
}
.remove-tag:hover {
color: #e74c3c;
}
.save-container {
text-align: center;
margin-top: 30px;
}
#saveTagsBtn {
padding: 12px 25px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s;
}
#saveTagsBtn:hover {
background-color: #2980b9;
}
.footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 14px;
}
.footer a {
color: #e74c3c;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>自定义标签选择器</h1>

<div class="tag-section">
<div class="section-title">默认标签</div>
<div class="tags-container" id="defaultTags">
<div class="tag" data-tag="前端开发">前端开发</div>
<div class="tag" data-tag="JavaScript">JavaScript</div>
<div class="tag" data-tag="HTML5">HTML5</div>
<div class="tag" data-tag="CSS3">CSS3</div>
<div class="tag" data-tag="jQuery">jQuery</div>
<div class="tag" data-tag="Vue.js">Vue.js</div>
<div class="tag" data-tag="React">React</div>
<div class="tag" data-tag="Node.js">Node.js</div>
</div>
</div>

<div class="tag-section">
<div class="section-title">我的标签</div>
<div class="tags-container" id="myTags"></div>

<div class="tag-input-container">
<input type="text" id="tagInput" placeholder="输入新标签，按回车或点击添加">
<button id="addTagBtn">添加</button>
</div>
</div>

<div class="save-container">
<button id="saveTagsBtn">保存我的标签选择</button>
</div>

<div class="footer">

</div>
</div>

<script>
$(document).ready(function() {
// 从本地存储加载我的标签
loadMyTags();

// 默认标签点击事件
$('#defaultTags .tag').on('click', function() {
$(this).toggleClass('selected');
});

// 添加标签按钮点击事件
$('#addTagBtn').on('click', addNewTag);

// 输入框回车事件
$('#tagInput').on('keypress', function(e) {
if (e.which === 13) { // Enter键
addNewTag();
}
});

// 保存按钮点击事件
$('#saveTagsBtn').on('click', saveSelectedTags);

// 添加新标签函数
function addNewTag() {
const tagText = $('#tagInput').val().trim();
if (tagText) {
// 检查是否已存在
if ($('#myTags').find(`[data-tag="${tagText}"]`).length === 0) {
const $newTag = $(`
<div class="tag selected" data-tag="${tagText}">
${tagText}
<span class="remove-tag">×</span>
</div>
`);

$('#myTags').append($newTag);
$('#tagInput').val('');

// 添加删除事件
$newTag.find('.remove-tag').on('click', function(e) {
e.stopPropagation();
$(this).parent().remove();
});
} else {
alert('该标签已存在!');
}
}
}

// 保存选择的标签函数
function saveSelectedTags() {
const selectedTags = [];

// 获取选中的默认标签
$('#defaultTags .tag.selected').each(function() {
selectedTags.push($(this).data('tag'));
});

// 获取我的标签
$('#myTags .tag').each(function() {
selectedTags.push($(this).data('tag'));
});

// 保存到本地存储
localStorage.setItem('mySelectedTags', JSON.stringify(selectedTags));

console.log(' 已保存标签:', selectedTags);
alert(`已保存 ${selectedTags.length} 个标签!`);
}

// 加载我的标签函数
function loadMyTags() {
const savedTags = localStorage.getItem('mySelectedTags');
if (savedTags) {
const tags = JSON.parse(savedTags);

// 标记默认标签中的选中项
$('#defaultTags .tag').each(function() {
if (tags.includes($(this).data('tag'))) {
$(this).addClass('selected');
}
});

// 添加我的标签
tags.forEach(tag => {
if ($('#defaultTags [data-tag="' + tag + '"]').length === 0) {
const $tag = $(`
<div class="tag selected" data-tag="${tag}">
${tag}
<span class="remove-tag">×</span>
</div>
`);

$('#myTags').append($tag);

// 添加删除事件
$tag.find('.remove-tag').on('click', function(e) {
e.stopPropagation();
$(this).parent().remove();
});
}
});
}
}
});
</script>
</body>
</html>