Question

我正在尝试将jquery效果与html链接结合使用，例如：当我点击一个链接时，它应该显示主页面中的特定div，它还应该导航到所需的页面，下面是我用来实现这个目的的代码没有成功：

<script type="text/javascript">
$(document).ready(function () {

 $('#services-sub-menu').hide();
   $('#services').click(function () {
     $('#services-sub-menu').show("slow");
     return false;
      });

});
 <div class="Menu2"><a href="/articles" id="articles">ARTICLES</a><br /> <a href="/services" id="services">TESTIMONIALS</a><br /><a href="#" id="contact">CONTACT US</a></div>
 </div><div class="sub-menu">
  <div id="services-sub-menu"><a href="/services-submenu" /></div>

</div>

jquery效果正常，但页面未导航到服务页面

Answer 1

在点击结束时返回false，基本上告诉浏览器停止默认行为。

jQuery等同于：

event.preventDefault();

，其中

$('#services').click(function (event) {

删除return false将允许链接按预期工作，但可能会在您的错误完成之前重定向。

你可以做的是在show方法中添加一个回调，并在那里使用Javascript重定向。

$('#services-sub-menu').show("slow",function(){
  // Stuff that will happen when animation has completed
  window.location.replace(redirectionUrl);
});

<强>更新

这是一个非常基本的工作示例：http://jsfiddle.net/XakkU/

<a href="http://www.google.com" id="clicker">Click me </a>
<div id="showMe">Hold on, we're taking off!</div>

$('#clicker').click(function(event){
    $('#showMe').show('slow',function(){
        window.location.replace($('#clicker').attr('href'));
    });
    event.preventDefault();
});

Answer 2

删除行

return false;

来自您的javascript。它可以防止进一步处理点击，因此链接不起作用。

Html Link与jquery效果无关

2 个答案: