jQueryを2回クリックして機能する

Question

jQueryを使用して、ユーザーをページの先頭に戻すアンカータグを更新しようとしています。ページのコンテンツがページ自体のheightより大きい場合、リンクが表示されます。コンテンツがページ自体よりも大きくない場合、リンクは表示されません。

コンテンツエレメントのheightは、navのリンクから返されるコンテンツに依存します。だから、リンククリックで、私はコンテンツ要素の高さを取得し、私は "トップに戻る"リンクを表示する必要があるかどうかを判断します。

問題はありませんが、問題が発生した場合は、navタブを2回クリックする必要があります。

のjQueryコード：

$(document).ready(function() { 
    $("a[data-toggle]").click(function() { 
     var pct = Math.round(($("div.tab-content").outerHeight(true)/$(window).height()) * 100); 
     if (pct > 90) { 
      $("#top-link").text("Back to top"); 
     } else { 
      $("#top-link").empty(); 
     } 
    }); 
}); 

ナビゲーションコード：

<header> 
    <nav> 
     <ul class="nav nav-tabs"> 
      <li><a data-toggle="tab" href="#configs" >Configs</a></li> 
      <li><a data-toggle="tab" href="#error-log" >Error Log</a></li> 
      <li><a data-toggle="tab" href="#user-log" >User Log</a></li> 
     </ul> 
    </nav> 
</header> 

コンテンツ要素：

<main> 
    <div class="tab-content"> 
     This area is populated with data depending on the nav link clicked. 
    </div> 
</main> 

は「トップに戻る」リンク：

<a id="top-link" href="#top"></a> 

それが最初のクリックで機能するように、これを固定して援助のため、事前にありがとうございます。 L-トレイン@

Fiddle

Answer 1

問題は、コンテンツがレンダリングされる前に計算が行われていて、if conditionに間違った値が取り込まれているということです。click event。私が示唆しているのは、click eventは、back-to-topのテキストを設定/消去する必要がないということです。代わりにshown.bs.tabイベントをbootstrap tabとし、tabが表示されたら操作を実行できます。あなたのJSコードが更新されるのは以下の通りです。

$(document).ready(function() { 
    setInterval(updateClock, 1000); 
}); 

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function(e) { 
    var pct = Math.round(($("div.tab-content").outerHeight(true)/$(window).height()) * 100); 
    if (pct > 90) { 
    $("#top-link").text("Back to top"); 
    } else { 
    $("#top-link").empty(); 
    } 
}); 

Here's the updated fiddle

提案の一環として、私の代わりに設定にして、テキストをクリアし、あなただけのように、#top-link要素に.hideと.showを使用することができることをお勧めしたいと思います$("#top-link").show()および$("#top-link").hide()である。

Demo for that

Answer 2

あなたはあなたがあなたのコードのいずれかのエラーを持っていないことを確認するためにチェックすることができグーグルクロームを持っていますか？マウスを右クリックしてinspect要素を実行できますか？