Question

我很想获得以下结果。用户浏览选项卡但是在重新输入同一页面时他没有看到加载效果（这是因为默认值被加载器覆盖） - 但是如何用加载器覆盖.load（）DOM在非活动选项卡上[简化::在离开选项卡时清除内容]。

我的基本尝试。从ajax页面重新输入时，第一个选项卡不起作用，但它不是在我的页面上正常运行的情况。

TLDR - 离开活动标签后将内容替换为原始内容（加载程序）

简单的JQuery

$('#myTabs a').click(function(e) {
  e.preventDefault();
  $.ajaxSetup({
    'cache': true
  });
  var url = $(this).attr("data-url");
  var href = this.hash;
  var pane = $(this);
  $(href).load(url, function(result) {
    pane.tab('show');

  });
});

一个例子

https://jsfiddle.net/074rk3re/4/

Answer 1

具有状态保存的Ajax Boostrap选项卡[Admin LTE模板]

好的我明白了:)发布以防万一有人也需要它有用。如果需要，请重建我的问题。

开始

我使用这两个变量来跟踪点击的标签和前一个标签，以便用装载机清除DOM

var targetel = $(e.target).filter($(this).attr('href'));
var prevel = $(e.relatedTarget).filter($(this).attr('href'));

接下来，我为ajax调用添加了一个短暂的睡眠。 [也许是Todo：虽然快速地将标签快速地贴在树上，但是它们不会取消负载，但是稍后会加载xhr请求，这有点无意义，你知道如何防止这种情况吗？ ]

然后我添加了loader元素。因为在第一次加载时没有先前的元素需要有条件。不确定它是否是适当的上下文方式，但它有效。

 $(targ).html('<div class="overlay text-center"><i class="fa fa-refresh fa-spin fa-5x"></i></div>');
  if (prevel.context) {
    $(prevel.context.hash).html('<div class="overlay text-center"><i class="fa fa-refresh fa-spin fa-5x"></i></div>');
  }

同样花哨的员工，我没有发布问题是刷新浏览器后活动标签的状态保存。我强制点击 - 因为它是xhr内容所以我想只有选项，并将其保存到localStorage。选择选项卡后，此状态保存将起作用。默认情况下，没有选择，如果你想这样你可以做这样的事情

$('#myTabs > li > a[href="' + activeTab + '"]').trigger('click');

其中activeTab是<li>中链接的ID。

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
  localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
  $('#myTabs > li > a[href="' + activeTab + '"]').trigger('click');
}

这就是全部，如果你有任何建议请写。

此处提供完整代码

https://jsfiddle.net/074rk3re/9/

Boostrap Ajax Tabs扭曲

1 个答案: