转到页面重新加载或“超链接"上的“特定"选项卡,其中选项卡由AJAX加载 [英] Go to Specific Tab on Page Reload or Hyperlink where tab is loaded by AJAX
本文介绍了转到页面重新加载或“超链接"上的“特定"选项卡,其中选项卡由AJAX加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一组Bootstrap选项卡.
I have a set of Bootstrap tabs.
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');
});
我想要的是加载有重点的标签,而不是总是加载第一个标签.
What I want is for the what ever tab has focus to be loaded, rather than always load the first.
更新: 我正在重点关注标签.它只是不会触发AJAX负载
Update: I am getting the tab to focus. It just doesn't fire off the AJAX load
这与 Twitter引导选项卡:转到页面重新加载或超链接上的特定"选项卡
推荐答案
转到最后一个具有焦点的选项卡的唯一方法是存储引用(使用cookie或本地存储).
The only way to go to the last tab that has the focus, is to store a reference (using cookies or local storage).
此代码使用本地存储来存储焦点标签的href值,以后再检索它.
This code uses local storage to store the href value of the focused tab and later retrieve it.
$(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');
}
});
这篇关于转到页面重新加载或“超链接"上的“特定"选项卡,其中选项卡由AJAX加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文