Jquery 当另一个div处于活动状态时，如何模糊该div？

因此，我想在

#visioncontent

处于活动状态时模糊

#homecontent

<代码>#visioncontent在url为

而

#homecontent

始终在后台充当主页

我如何设置一个脚本，可能是在jQuery中（根据我的研究），它指定当

#vision

处于活动状态时，

#homecontent

将被模糊，可能使用

“-webkit filter:blur（20px）”

或其他方法

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

编辑：我添加了一个github repo，任何人都可以在本地使用代码，看看什么是有效的。我基本上希望任何时候#vision、#Project、或#contact active或selected，我希望#homecontent下的主页或背景模糊

您可以通过执行以下操作，在单击“Vision”菜单项时始终模糊“homecontent”

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

您需要向Vision菜单项添加一个id，以便

<a href="#vision"> 

您还可以查看jQuery的

hashChange

事件

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

编辑： 使index.html看起来像

注意事项：

• 我删除了#from

  id='#菜单视图

• 我在你的
  标签中更改了你的JS
• 我在css中添加了

  blurHome

  类
• 您可能应该将
  和
  代码分别移动到js和css文件中

---

代码的第一行缺少一个#。当用户转到页面并单击您指定的链接时，也可以这样做，但如果用户将页面添加到书签中，则不会这样做。使用hashchange事件不是更好吗？它将与链接和书签一起工作，并且它不需要额外的代码更改（添加ID到链接）是正确的更新我的答案包括HASHORKEST…并添加了……我为它创建了一个github回购协议，我想你们可以通过实际使用代码来帮助我**请记住，除非您将其在线上传到服务器或安装了正确的web插件，否则所见的web粒子效果（）不起作用。至少对我来说。哇，你帮了我大忙。正如我所说，我在编程方面没有太多经验，但实际上我在过去使用addClass的时候把脚本弄乱了。但是无论如何，非常感谢你的帮助。有没有关于使过滤器平稳过渡的建议？编辑：明白了，使用“转换：所有1”；实际上是最后一个问题。当我点击菜单上的“返回主页”时，有没有关于如何平稳过渡效果的建议？

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

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