Javascript 在单击时切换颜色链接颜色

我有一个程序，其中显示了一系列标签，每次单击它们时，它们都会出现在一个div（

）中，要删除标签，您必须返回单击，但这次是在div1中出现的标签上

我现在尝试的是，每次我点击div1之外的标签，它们都会变成蓝色，如果我从div1中删除它们，它们就会恢复到原来的颜色

你能帮我吗？我可以用html+css做吗？或者我需要js

这是我的JS：

var ar = new Array();

function myFunction(tagName, tagId) {
    if (!document.getElementById(tagName)) {
        document.getElementById("div1").innerHTML +=
            '<label class="tags" id="' + tagName + '" onclick="rem(\'' + tagName + '\', \'' + tagId+ '\')">' + tagName + ',  </label>';

        ar.push(tagId);
        document.getElementById("hiddenfield").value = ar;
    }
}

function rem(tagName, tagId) {
    document.getElementById(tagName).remove();
    ar.splice(ar.indexOf(tagId), 1);
    document.getElementById("hiddenfield").value = ar;
}

我想要的是这样的：

---

但不是单击同一个链接，而是链接在Div1中，这些是基础。只有两个元素包含标签。（我在这里使用列表，因为在列出多个项目时使用列表是有意义的。）然后让颜色由它们所属的列表决定，而不是在项目本身上使用颜色

从一个列表切换到另一个列表就像将目标添加到新列表一样简单

const-tags=[…document.querySelectorAll（'.tag'）]；
const input=document.querySelector（“#tags_input”）；
const output=document.querySelector（“#tags_output”）；
常量移动=事件=>{
const list=event.target.parentNode.parentNode；
if（list.id==='tags_input'）output.appendChild（event.target.parentNode）；
else if（list.id===“tags_output”）input.appendChild（event.target.parentNode）；
};
tags.forEach（tag=>tag.addEventListener（'click'，move））
#tags_input.tag{
背景颜色：浅蓝色；
}
#tags\u output.tag{
背景颜色：灰色；
}









#div1 label{color:blue；}
..？除非您希望让服务器PHP进行重新排序，否则您需要JS（如您所示）删除/重新创建页面上的HTML节点。你被困在什么地方了吗？由于您只需执行相反的操作即可将标签移回div中。@shilly如果我第一次单击标签，我希望更改的颜色将显示在中，然后显示在中。若要从中删除，请再次单击“但在内部”，此时内部的标签应返回到其位置color@04FS这不管用，我试过了：/颜色只是css，如04FS所示。移除
背景色：aliceblue并将其放在包装上。因此
#div1.tags{background color:aliceblue；}
将id“header”添加到，
#header.tags{background color:grey；}
。这样，您就不必更改标记上的类。它们的容器（div或h3）决定它们的颜色。谢谢你的回答！，也许我应该这样做。你知道如何使标签返回到再次单击“tags_output”时的位置吗？@ana，是的，但是如果你想“高效地”执行，JS结构会变得更复杂一些。可以吗？好的，谢谢！嗯，还有一个bug需要修复。明天我会尝试更新我的答案。
<p>
    Introduce tags:
</p>

<div id="div1">
</div>
<h3>
    <?php
    while($row = $result->fetch_assoc()) {
        echo "<label><a class=\"trigger blue lighten-4\" data-toggle=\"modal\" data-target=\"#conditionModal\" onclick=\"myFunction('" . $row["tag_name"] ."', '" . $row["tag_id"] ."')\">" . $row["tag_name"] ." </a></label>";
    }
    ?>
</h3>

.trigger {
    padding: 1px 10px;
    font-size: 20px;
    font-weight: 400;
    border-radius: 10px;
    background-color: aliceblue;
    color: #212121;
    display: inline-block;
    margin: 2px 5px;
    cursor:pointer;
}

a:hover {
    color: black;
    background-color: red;/* #e6e6e6 */
}
/* selected link */
a:active {
    color: white;
}

.tags {
    font-family: Arial, Helvetica, sans-serif;
    cursor:pointer;
    padding: 1px 10px;
    font-size: 15px;
    font-weight: 400;
    border-radius: 10px;
    background-color: aliceblue;
    color: #212121;
    display: inline-block;
    margin: 2px 5px;
}

.tags:hover {
    color: red;
}