我有一组Bootstrap标签。

的HTML

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#main" role="tab" data-toggle="tab" data-url="~/ccf/main">Main</a></li>
    <li><a href="#userinfo" role="tab" data-toggle="tab" data-url="~/ccf/userinfo">User Info</a></li>

   ...
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="main"></div>
  <div class="tab-pane" id="userinfo"></div>
  ...
</div>


JS

var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
}

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash;
})


// load first tab content if it is AJAX
$('#main').load($('a[data-url]:first').attr("data-url") +  "&silent=1", function (data) {
    $('.active a').tab('show');
});


我想要的是加载有重点的选项卡,而不是始终加载第一个。

更新:
我正在重点关注标签。它只是不会触发AJAX负载

这与Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink不同

最佳答案

转到具有焦点的最后一个选项卡的唯一方法是存储引用(使用cookie或本地存储)。

此代码使用本地存储来存储焦点标签的href值,并在以后检索它。

$(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        localStorage.setItem('focustab', $(e.target).attr('href'));
    });

    var focustab = localStorage.getItem('focustab');
    if (focustab) {
        $('[href="' + focustab + '"]').tab('show');
    }
});

关于jquery - 转到页面重新加载或通过AJAX加载选项卡的超链接上的特定选项卡,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29679749/

10-12 00:07
查看更多