单击时切换颜色链接颜色

时间:2019-04-15 13:06:33

标签: javascript php html css

我有一个程序,其中显示一系列标签,每次单击它们时,它们就会出现在div(<div id = "div1"> </ 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;
}

这是我的PHP:

<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>

这是我的CSS:

.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;
}

我想要的是这样的:

http://jsfiddle.net/Shef/L6VqK/

该链接位于Div1内,而不是单击同一链接

1 个答案:

答案 0 :(得分:1)

这些是基础。仅包含两个包含标签的元素。 (我在这里使用列表,因为在列出多个项目时使用列表是有意义的。)然后让颜色由它们所属的列表确定,而不是在项目本身上使用颜色。

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

const tags = [ ...document.querySelectorAll( '.tag' )];
const input = document.querySelector( '#tags_input' );
const output = document.querySelector( '#tags_output' );
const move = event => {
  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 {
  background-color: lightblue;
}
#tags_output .tag {
  background-color: grey;
}
<ul id="tags_input">
  <li class="tag"><a href="#">First tag</a></li>
  <li class="tag"><a href="#">Second tag</a></li>
  <li class="tag"><a href="#">Third tag</a></li>
  <li class="tag"><a href="#">Fourth tag</a></li>
  <li class="tag"><a href="#">Fifth tag</a></li>
  <li class="tag"><a href="#">Sixth tag</a></li>
  <li class="tag"><a href="#">Seventh tag</a></li>
</ul>
<ul id="tags_output"></ul>

请记住,这与基本链接功能非常相似,其中已单击的链接使用:visited颜色,可以在CSS中完全完成此操作(通过使用a:visited,a:hover,a:active等)

仅移动项目并将链接颜色重新设置为原始颜色,就好像尚未单击链接一样,无法在CSS中完全完成。