Turbolinks 和 Bootstrap 选项卡激活

Question

在 Rails' Turbolinks.

的附加上下文下，我基本上面临与 described here 相同的问题

我正在使用这段代码

$(document).on('ready page:change', function() {
    /* Show tab from anchor */
    var hash = window.location.hash;
    hash && $('ul.nav a[href="' + hash + '"]').tab('show');

    /* Update URL anchor after selecting tab */
    $('.nav-tabs a').click(function (e) {
        $(this).tab('show');
        var scrollmem = $('body').scrollTop();
        window.location.hash = this.hash;
        $('html,body').scrollTop(scrollmem);
    });

这对手动页面重新加载 (F5) 和缓存恢复有效，但在从 Turbolinks 单击*重新加载页面后无效。

*当点击 turbolinks link 时，如果页面有一些缓存，则首先恢复该缓存并显示好的选项卡，但是然后仍然向服务器请求获取最后的内容，一旦该请求到达并被解析，选项卡 "switches back" 到原始的

我的 bootstrap 代码如下所示

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#student" role="tab"></a>
    </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#mentor" role="tab"><%= </a>
    </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#company" role="tab"></a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <br />
    <div class="tab-pane fade in active" id="student" role="tabpanel">
        ...
    </div>
    <div class="tab-pane fade" id="mentor" role="tabpanel">
        ...
    </div>
    <div class="tab-pane fade" id="company" role="tabpanel">
        ...
    </div>
</div>

Answer 1

Rails 5 随 Turbolinks 5 一起提供。解决方案只是更改事件侦听器的名称

$(document).on('ready turbolinks:load', function() {

Turbolinks 和 Bootstrap 选项卡激活

Turbolinks and Bootstrap Tab activation

javascript

twitter-bootstrap

turbolinks

ruby-on-rails-5