3

この関数は、アニメーションを使用してナビゲーションから#idにスクロールし、数秒間bg-colorcolorで色付けします。

これは、アンカータグの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;
     });
}

link();これは私のHTMLです。このテキストの上に表示 されている関数にリンクすることで、anchoronclickプロパティを上書きするだけです。

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

何か案は？よろしくお願いします。

4

4 に答える 4

2

インラインJavaScriptから関数を呼び出し、link()関数内でクリックイベントを再度呼び出していますlink()。これは意味がなく、まったく必要ありません...

これを試して

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

このlink関数は、スクロールするものだけを設定します。したがって、2回目のクリックでプライムすると、ハンドラーが実際に実行されます。

そのインラインハンドラーを間違ったjavascript:構文で破棄し、

$(document).ready(link);

DOMがロードされたときにセットアップ機能を実行する外部jsで。return false;また、タイムアウトからハンドラーまで1行下に移動する必要があると思います。

于 2013-03-17T18:34:12.377 に答える
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 に答える