的 Here's the updated fiddle

Question

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

内容元素的height取决于我nav中的链接返回的内容。因此，在链接点击时，我得到内容元素的高度，并确定是否需要显示＆＃34;返回顶部＆＃34;链接。

虽然有效，但问题是你必须点击nav标签两次才能生效。

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>

＆＃34;返回顶部＆＃34;链接：

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

提前感谢您提供帮助以解决此问题，以便第一次点击时即可正常运行。

Fiddle

Answer 1

嗯，问题在于您的计算会在呈现内容之前发生，因此在if condition内的click event中输入了错误的值。我的建议是，您不需要click event来设置/清除back-to-top文字。相反，您可以使用bootstrap tab的 shown.bs.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

作为建议的一部分，我建议您不要设置和清除文字，而只需将.hide和.show用于{{1} }元素，如#top-link和$("#top-link").show()。

<强>

的 Demo for that

Answer 2

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

jQuery单击两次才能运行

2 个答案:

的 Here's the updated fiddle

的 Demo for that