當我點擊該元素時，如何隱藏網頁中的其他元素？

-2

我正在建立一個wordpress網站，並在標題部分有一個搜索欄。如何在使用搜索欄時在搜索欄中除其他元素上創建dim effect(background:rgba(0,0,0,0.3))（例如，在Quora.com中）。此外，如果我使用其他元素（除搜索欄之外）的代碼（如輸入框或其他任何div），此代碼（您的答案）應該工作。當我點擊該元素時，如何隱藏網頁中的其他元素？

我會更滿意，如果你有一個靈活的答案來使用任何股利。

感謝您提前。

來源

2017-05-31 codewiz

'我會更滿意，如果你來到一個答案是可以靈活地用於任何div。「您似乎已將StackOverflow與代碼編寫服務相混淆。 –

什麼是真正的StackOverflow？ – codewiz

加上Rory的評論 - 你嘗試過一些東西，但它不太合適？你能不能包含一下，以便我們可以看看出了什麼問題？ – SWLim

使用opacityproperty並將其應用於需要的地方。

div { 
    opacity: 0.3; 
}

來源

2017-05-31 08:35:06

如何感應點擊並相應地改變不透明度？ – codewiz

@codewiz添加一個事件，當觸發時，將CSS「不透明度」類應用於需要透明的任何元素。使用JavaScript瞭解[JavaScript事件]（https://www.w3schools.com/js/js_events.asp）和[如何應用CSS]（https://www.w3schools.com/js/js_htmldom_css.asp）。 –

您需要將點擊事件添加到需要單擊的元素。然後，您可以綁定到是在點擊觸發該事件的功能，如下所示：

var test = document.getElementById("test"); 
 
test.addEventListener("click", changeColour); 
 

 
function changeColour() { 
 
    var changeme = document.getElementById("change"); 
 
    changeme.classList.add("addopacity"); 
 
}

#change { 
 
    background: #000; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#change.addopacity { 
 
    opacity: 0.2; 
 
}

<button id="test">Click me please</button> 
 
<div id="change"></div>

請注意，您不必添加一個類像我的目標元素如上所述，您可以輕鬆地在函數中添加changeme.style.opacity = "0.2";的內聯樣式。

如果你想點擊元素本身並使其變色，你可以做同樣的事情：

var test = document.getElementById("change"); 
 
test.addEventListener("click", changeColour); 
 

 
function changeColour() { 
 
    this.classList.add("addopacity"); 
 
}

#change { 
 
    background: #000; 
 
    width: 100px; 
 
    height: 100px; 
 
    color: #fff; 
 
} 
 
#change.addopacity { 
 
    opacity: 0.2; 
 
}

<div id="change">CLICK ME</div>

來源

2017-05-31 09:14:29

當我點擊該元素時，如何隱藏網頁中的其他元素？

回答

相關問題