假/自动化JavaScript/jQuery中的“悬停”?

假/自动化JavaScript/jQuery中的“悬停”?

问题描述:

我希望把这个导航栏上我的网站,这里是演示页:http://insicdesigns.com/demo/css3/exp1/index.html 它使用JavaScript,jQuery和CSS假/自动化JavaScript/jQuery中的“悬停”?

问题是,在我的网站我使用PHP和的index.php?页=家里?的index.php?页=接触等 我无法弄清楚如何将酒吧作为“活动” [默认为“家”]上设置的项目。我看着代码,我发现,第一<李> [归属]有类=“活动”。我试着简单地将课程移到第二个项目[“关于”],但是这只是将所有动画都移动到右侧,而不是按照它的意图工作。所以在。点击(),这是怎么设置活动项目:

$(this).siblings('li').removeClass('active'); // removes active 
$(this).addClass('active'); 

所以我把另一个项目ID =“目标”,使用Chrome浏览器的JS控制台我在相同的代码类型,除了我用“#target”代替“这个” 但没有立即改变。我不得不悬停高出横梁,对于动画开始播放,查找活动项目,并移动动画那边。现在,如果我用它来取代我现在的导航栏[这是here],如果有人去index.php?page=contact让用户知道他们是About页面上我不能让关于链接激活!

因此,这里是我的问题: 有没有办法告诉jQuery的我只是徘徊,从一些代码? [傻瓜吧] 类似:

$("#target").fakeEvent("hover"); 

所以它运行的代码[其中,顺便说一句,连接到一个函数(){}一个$(选择)内.hover() - 看看示例中的lavalamp.js文件]?如果你能帮忙,我会很感激!谢谢:)

答:http://jsfiddle.net/morrison/4CU4H/

在回答注:

  • The fancy menu使用JavaScript差。我已经修改了脚本来修复一些错误以及优化性能。 使用我的JavaScript而不是他们的。
  • 获取活动类在页面加载正确的位置,简单地套用活动类,你想jQuery的调用之前。您应该可能在您的php输出中设置活动类。当JavaScript不加载时,这也允许很好的风格降级。
  • 插件禁用一下,因为这是一个例子。您可能想要删除点击函数中的return语句。

注意在您的网站:

  • 隐藏您的查询。这不是一个硬性规定,但在你的情况下,你应该。 http://www.macdonaldfamilysingers.com/?page=contactindex.php?page=contact应该是http://www.macdonaldfamilysingers.com/contact/。这里是a tutorial on url rewriting。你可能想美化你的表。通过删除一些边框和间距,它也会占用更少的视觉空间。
+0

感谢您对url重写的提示......但是,它们似乎无法在我的本地Apache2服务器[Ubuntu 11.04 x64]上运行,可能是我的配置;然而,如果我不能在'localhost'上工作,那么它会使开发变得非常困难! :P [然而,它在我的远程服务器上工作。]另一个复杂的是,我必须为每个需要&variable = value的页面使用重写引擎,例如页面“schedule” = 2012年,或无论哪一年。 [你仍然可以重写网址,但它似乎只是让事情变得更加复杂]现在尝试你的修改后的代码 – Matt 2011-05-02 19:49:58

+0

这并不难,真的。事实上,它使得它更简单:'/ schedule/2012 /'vs'?page = contact&year = 2012'如果这是规则并发症,让你担心,它也很容易(未经测试):'RewriteRule^schedule /([0-9 ] *)/?$ /?page = schedule&year = $ 1 [L,NC]'。基本上,你要处理需要特定值的规则,然后为剩下的内容做一个通用规则。 – 2011-05-02 20:05:38

+0

哦..好吧,我会考虑这样做..但它不只是一个页面。我不记得是否在我的联系方式中使用了更多&vars = vals,或者其中任何一个页面。我总是可以在我的代码中挖掘并查看.. *无论如何* ...我从您发布的URL复制JS,CSS和HTMl,但它不起作用。但是,它确实在URL的“结果”框中生成动画。这很奇怪,我不明白为什么当我把它放在我的服务器上时它不起作用。编辑:我已经上传到这里:http://www.macdonaldfamilysingers.com/matt/menu_test/ – Matt 2011-05-02 20:14:36

那么,hover包括两个事件,mouseentermouseleave

你可以触发事件mouseenter

$("#target").mouseenter(); 
+0

我差点把这个竖起大拇指,因为它确实回答了他的问题。但是,经过调查,我发现插件有问题,需要进行一些调整。我宁愿不解决他的问题,只是为了解决另一个问题。 – 2011-05-02 18:33:03

+0

酷!这*确实*回答我的问题。如果我无法让Levi的答案正确工作,我会请你的帖子。顺便说一句,当我**检查**一个帖子,这是什么意思? – Matt 2011-05-02 20:31:31

+0

我在