Question

所以我使用的是Bootstrap的响应表：

<ul class='nav nav-tabs first-table'>
<li><a href='#1' data-toggle='tab'>Tab 1</a></li>
<li><a href='#2' data-toggle='tab'>Tab 2</a></li>
<li><a href='#3' data-toggle='tab'>Tab 3</a></li>
</ul>
<div class='tab-content margin-bottom'>

要在页面加载时使第一个选项卡处于活动状态，我使用的是JQuery中的一些脚本：

$(function () {
    $('.first-table a:first').tab('show');
});

但是当用户点击“下一个”或“上一个”按钮时，我也会使用Ajax动态更新表格，每当发生这种情况时，我会重新运行脚本以保持第一个标签处于活动状态：

$('.first-table a:first').tab('show');

但是，如果用户在单击“下一步”或“上一步”之前已经在表上切换了选项卡，则Ajax会将用户带回第一个选项卡。有没有办法创建一个全局变量来跟踪当前活动的任何选项卡，并以某种方式将其提供给Ajax脚本？我也尝试将“a：first'”更改为“a：second'”以查看是否可以更改默认的活动选项卡，但这也不起作用。

很抱歉，如果这是一个冗长的方式来问一个非常简单的问题。我是很多新手，并且一直很难过。

Answer 1

你可以做得很好。

首先在变量中保存选项卡的默认值：

var selected='#1'; //#1 is the 'href' of your tab's anchor tag

然后单击任何选项卡，将 href 保存到变量中：

$('.first-table a').on('click',function(){
    selected = $(this).attr('href');
});

最后，你可以做一个AJAX响应：

$('.first-table a[href="'+selected+'"]').tab('show');

这是一个演示，其中“重置”按钮充当您的AJAX，以及如何在重置后恢复标签。

<强> DEMO

带有ajax的Bootstrap响应表活动选项卡

1 个答案: