当另一个div处于活动状态时，我如何模糊一个div ?

Question

所以我想模糊#homecontent时，#visioncontent是活跃的。当url为

时，#visioncontent激活。

和#homecontent总是在后台充当主页。

http://visiondigit.al/VisionDigital_Launch/index.html

我怎么能设置一个脚本，可能在jQuery(从我所研究的)，它指定当#vision是活跃的，#homecontent将被模糊，也许使用"-webkit-filter: blur (20px)"或其他东西。

谢谢，所有的输入都有帮助。我不是一个有经验的网页设计师。

编辑:我已经添加了一个github repo，任何人都可以在本地玩代码，看看什么是有效的。我想让#vision， #projects，或者#contact处于激活状态或者选中状态，我想让#homecontent下面的主页或者背景模糊化。

https://github.com/cweigen/VisionDigital_Launch

Answer 1

你可以在点击"视觉"菜单项时模糊#homecontent，方法如下:

$( "#menuVision" ).click(function() {
  $( '#homecontent' ).addClass('blurHome');
});

您需要为视觉菜单项添加一个id，以便

<a href="#vision"> 

是

<a href="#vision" id="menuVision">

在你的css中…

.blurHome{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

你也可以看看jQuery的hashChange事件。

$(window).on('hashchange',function(){ 
    //Add class here if location.hash = vision.
});

编辑:

让你的index.html看起来像这样:

注意事项:

• 我删除了#从id='#menuVision
• 我改变了你的JS在你的<script>标签。
我在css中添加了blurHome类。你应该将<script>和<style>代码分别移动到js和css文件中。