jquery - Html 链接不能与 jquery 效果结合使用

标签 jquery asp.net css

例如,我正在尝试将 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 效果正常但页面没有导航到服务页面

最佳答案

通过在点击结束时返回 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();
});

关于jquery - Html 链接不能与 jquery 效果结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7447324/

相关文章:

javascript - .NET webclient 向 Javascript 请求代码

asp.net - ListView 内带边框的表格

html - 我需要在 index.html 文件顶部使用多少 Bootstrap 链接才能使用模板

css - 自定义组合框中的默认文本

asp.net - 如何在ASP.Net中处理Web服务请求

html - 如何根据元素数量设置元素宽度?

javascript - 多个值在 js ajax 中不起作用

javascript - 使用 jQuery 允许在子元素上垂直滑动和在父元素上左右滑动滚动

javascript - 如何使用表单中的隐藏字段获取发送的html页面内容

c# - 如何让按钮调用服务器功能然后更新更新面板?