jQuery点击两次即可运行

Question

我正在尝试使用jQuery来更新将用户带回页面顶部的锚标记。如果页面上的内容大于页面本身的height，则会显示该链接。如果内容不大于页面本身，则链接将不会显示。

内容元素的height取决于从我nav中的链接返回的内容。因此，在单击链接时，我获得内容元素的高度并确定是否需要显示"返回顶部"链接。

它可以工作，但问题是您必须单击nav选项卡两次才能正常工作。

j查询代码 ：

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

提前感谢您在解决此问题方面的帮助，以便它在第一次单击时即可运行。

小提琴

Answer 1

好吧，问题是您的计算会在内容呈现之前更早发生，因此在click event内将错误的值纳入您的if condition。我的建议是，您不需要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();
}
});

这是更新的小提琴

作为建议的一部分，我想建议您不要设置和清除文本，而是可以使用.hide并将.show#top-link元素，如$("#top-link").show()和$("#top-link").hide()。

演示

Answer 2

@L-Train 你有谷歌浏览器吗，你可以在其中检查以确保你的代码没有任何错误？您可以通过右键单击鼠标来执行检查元素吗？