[英]Toggle colour link colour on click
我有一個程序,其中顯示了一系列標簽,每次單擊它們時,它們就會出現在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內,而不是單擊同一鏈接
這些是基礎。 僅包含兩個包含標簽的元素。 (我在這里使用一個列表,因為在列出多個項目時使用列表是有意義的。)然后讓顏色由它們所屬的列表確定,而不是在項目本身上使用顏色。
從一個列表切換到另一個列表就像將目標附加到新列表一樣容易。
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中無法完全完成。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.