Question

此功能使用动画从导航滚动到#id，并将其颜色为bg-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，我只是通过将它链接到我的函数link();来覆盖锚onclick属性，你可以在本文上面看到它。

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

有什么想法吗？非常感谢您提前帮助。

Answer 1

您正在通过内联javascript调用link()函数，并再次调用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 inline

<li class="sub-menu-element"><a href="#DERMATOLOG">DERMATOLOG</a></li>

Answer 2

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

使用错误的javascript:语法丢弃内联处理程序，然后输入

$(document).ready(link);

在外部js中，它将在加载DOM时执行setup函数。另外，我认为你应该将return false;第一行从超时移到处理程序。

Answer 3

试试这段代码：

    $(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);

      });
});

Answer 4

$(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>

Onclick功能不会首先运行

4 个答案: