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链接时，如果页面有一些缓存，那么首先恢复该缓存并显示好选项卡，但是仍然是对服务器的请求以获取最后的内容，一旦该请求到达并被解析，标签“切换回”原始

我的引导代码如下所示

<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 Tab激活

1 个答案: