在單擊元素時添加一個類，在其他地方單擊時將其刪除

我需要在元素被點擊時添加一個類（.highlight），並且在元素或文檔中的任何其他位置單擊時應該將其刪除。在單擊元素時添加一個類，在其他地方單擊時將其刪除

當使用classList.toggle()方法單擊元素時，我設法添加和刪除類，但不知道如何在文檔中發生點擊時刪除該類。

這是我的HTML，CSS和JS。

<p class="normal" onclick="detectClick(this)">This is paragraph 1</p> 
<p class="normal" onclick="detectClick(this)">This is paragraph 2</p> 
<p class="normal" onclick="detectClick(this)">This is paragraph 3</p> 

.highlight { 
    background-color: yellow; 
} 

function detectClick(element) { 
    element.classList.toggle("highlight"); 
}

這裏的地方，你可以看到在行動代碼，http://codepen.io/vbcda/pen/GodZmr

來源

2016-01-27 Vinith Almeida

你忘了JS的添加到您的問題。 – j08691

如果您通過單擊主體中的任何位置使用mousedown事件首次從元素中移除退出類「高亮」，就可能發生這種情況。

<body onmousedown="outerClick(this)"> // Add this in your html file 

function detectClick(element) { 
    element.classList.toggle("highlight"); 
} 
function outerClick(el){ 
    var elements = document.querySelectorAll(".highlight"); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].classList.remove('highlight'); 
    } 
}

來源

2016-01-27 19:01:03

我會做這樣的事情。

function detectClick(element) { 
    var elements = document.getElementsByClassName("normal"); 
    Array.from(elements).forEach(function(element) { 
    element.setAttribute("class", "normal"); 
    }); 
    element.setAttribute("class", "normal highlight"); 
}

您可能是顯式的，也可以使用document.getElementsByClassName（「normal highlight」）。

來源

2016-01-27 18:33:02

一個簡單輕便的解決方案

這可以用一對夫婦的CSS的線來完成。在這種情況下的訣竅是，您必須將tabindex屬性添加到每個P，以便它可以獲得焦點。

運行下面的代碼片段並單擊文本以嘗試。

p:not(:focus) { background-color: lightgray;} 
 
p:focus { background-color: yellow;}

<p tabindex=1>This is paragraph 1</p> 
 
<p tabindex=2>This is paragraph 2</p> 
 
<p tabindex=3>This is paragraph 3</p>

來源

2016-01-27 19:01:53 Roberto

如果你想使用jquery

：

$('.normal').click(function(e){ 
    e.stopPropagation(); 
    $(this).toggleClass('highlight'); 
}); 

$(document).click(function(){ 
    $('.normal').removeClass('highlight'); 
});

來源

2016-01-27 19:03:52 Nate

在單擊元素時添加一個類，在其他地方單擊時將其刪除

回答

相關問題