3

此功能使用动画从导航滚动到#id，并将其着色为 bg-color color 几秒钟。

这是我用来从导航向下滚动到页面上使用的内容的功能，方法是在锚标记中使用它的 id<h1 id="#someid">和属性。href="#someid"该功能工作正常，但是，它在加载页面后第一次单击时不起作用。知道如何解决它以及导致它的原因吗？

//EXTERNAL JAVASCRIPT

function link(){
          $('a[href^="#"]').click(function() {
              var target = $(this.hash);
              if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
              if (target.length == 0) target = $('html');
              $('html, body').animate({ scrollTop: target.offset().top }, 100); 
              target[0].style.backgroundColor = 'red';
              setTimeout(function(){
                  target[0].style.backgroundColor = 'dodgerBlue';
             }, 8000);
              return false;
     });
}

这是我的 HTML，我只是通过将锚点 onclick 属性链接到我的函数来覆盖它link();，您可以在此文本上方看到它。 

//HTML 
<li class="sub-menu-element"><a href="#DERMATOLOG" onclick="javascript:link()">DERMATOLOG</a></li>

有任何想法吗？非常感谢您提前提供的帮助。

4

4 回答 4

2

您正在link()从内联 javascript 调用函数并再次调用link()函数内部的 click 事件。这没有任何意义，根本不需要......

尝试这个

$(function(){ //call the codes after this when document is ready...
  $('a[href^="#"]').click(function() {  //call the click event
          var target = $(this.hash);
          if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
          if (target.length == 0) target = $('html');
          $('html, body').animate({ scrollTop: target.offset().top }, 100); 
          target[0].style.backgroundColor = 'red';
          setTimeout(function(){
              target[0].style.backgroundColor = 'dodgerBlue';

         }, 8000);
          return false; 
  });
});

有了这个..你也不需要onclick内联

<li class="sub-menu-element"><a href="#DERMATOLOG">DERMATOLOG</a></li>
于 2013-03-17T18:42:03.153 回答
0

试试这个代码：

    $(document).ready(function(e){
      $('a[href^="#"]').click(function() {
          var target = $(this.hash);
          if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
          if (target.length == 0) target = $('html');
          $('html, body').animate({ scrollTop: target.offset().top }, 100); 
          target[0].style.backgroundColor = 'red';
          setTimeout(function(){
              target[0].style.backgroundColor = 'dodgerBlue';
              return false;
         }, 8000);

      });
});
于 2013-03-17T18:53:27.400 回答
0 
$(document).ready(function(){ //call the codes after this when document is ready...
$('a[id="demo"]').click(function() {  //call the click event
      var target = $(this.hash);
      if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
      if (target.length == 0) target = $('html');
      $('html, body').animate({ scrollTop: target.offset().top }, 100); 
      target[0].style.backgroundColor = 'red';
      setTimeout(function(){
          target[0].style.backgroundColor = 'dodgerBlue';

     }, 8000);
      return false;

}); });

<li class="sub-menu-element"><a href="#" id='demo'>DERMATOLOG</a></li>
于 2013-03-18T07:50:02.790 回答
0

该link功能仅设置滚动事物。因此，在第二次单击时，处理程序将实际执行。

javascript:用错误的语法扔掉那个内联处理程序，然后放一个

$(document).ready(link);

在您的外部 js 中，它将在加载 DOM 时执行设置功能。另外，我认为您应该将第一return false;行从超时移到处理程序。

于 2013-03-17T18:34:12.377 回答