当我点击该元素时，如何隐藏网页中的其他元素？

问题描述：

我正在建立一个wordpress网站，并在标题部分有一个搜索栏。如何在使用搜索栏时在搜索栏中除其他元素上创建dim effect(background:rgba(0,0,0,0.3))（例如，在Quora.com中）。此外，如果我使用其他元素（除搜索栏之外）的代码（如输入框或其他任何div），此代码（您的答案）应该工作。当我点击该元素时，如何隐藏网页中的其他元素？

我会更满意，如果你有一个灵活的答案来使用任何股利。

感谢您提前。

'我会更满意，如果你来到一个答案是可以灵活地用于任何div。“您似乎已将*与代码编写服务相混淆。 –

什么是真正的*？ – codewiz

加上Rory的评论 - 你尝试过一些东西，但它不太合适？你能不能包含一下，以便我们可以看看出了什么问题？ – SWLim

答

使用opacityproperty并将其应用于需要的地方。

div { 
    opacity: 0.3; 
}

如何感应点击并相应地改变不透明度？ – 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>

当我点击该元素时，如何隐藏网页中的其他元素？

相关推荐