如何将选项卡窗格设置为动态或手动激活

Question

我最近开始使用动态选项卡，但在尝试使用它们和它们各自的 div 时碰壁了。

我的代码如下并以这种方式工作：

<ul id="modalFormUlId" class="bootstrapWizard form-wizard">
    <li class="active" data-target="#step1"><a href="#tab1" data-toggle="tab"> <span class="step">1</span><span class="title">Datos Generales</span> </a>
    </li>
    <li data-target="#step2"><a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Detalles Financieros</span> </a>
    </li>
    <li data-target="#step3"><a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Archivos</span> </a>
    </li>
    <li data-target="#step4"><a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Historial Transacciones</span> </a>
    </li>
    <li data-target="#step5"><a href="#tab5" data-toggle="tab"> <span class="step">5</span> <span class="title">Resguardante</span> </a>
    </li>                                       
    <li data-target="#step6"><a href="#tab6" data-toggle="tab"> <span class="step">6</span> <span class="title">Etiqueta</span> </a>
    </li>
</ul>
<div class="clearfix"></div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
    <br>
    <h3><strong></strong> Datos Generales</h3>                                          
</div><!-- End tab1 -->     
<div class="tab-pane" id="tab2">
    <br>
    <h3><strong></strong> Detalles Financieros</h3>                                     
</div>
<div class="tab-pane" id="tab3">
    <br>
    <h3><strong></strong> Lista Archivos</h3>
</div>
<div class="tab-pane" id="tab4">
    <br>
    <h3><strong></strong> Historial de Transacciones</h3>
</div>                                      
<div class="tab-pane" id="tab5">
    <br>
    <h3><strong></strong> Resguardante</h3>     
</div>
<div class="tab-pane" id="tab6">
    <br>
    <h3 ><strong></strong> Etiqueta del Bien</h3>
</div>

• 当我单击一个按钮时，会出现一个小窗口 (div)，其中包含 上面写的代码。
• 单击任何 li 元素，将显示其各自的 div
• Bootstrap 类使 li 元素显示为圆形 设置为活动时绘制绿色（默认为第一个，然后更改 当我点击其中任何一个时）
• 如您所见，第一个 li 元素的类设置为活动， 因为当窗口第一次打开时，它显示的默认选项。
• 当我关闭我的 div 并通过单击按钮重新打开它时，它会出现 再次将最后一个 li 元素单击为活动状态（因此，如果我单击 li for #step3 元素然后关闭我的窗口并再次打开它，#tab3 div 仍会显示）。

我的问题是在重新打开窗口后尝试将不同的 li 元素设置为活动元素时，因为 #step1 一直显示为活动元素，即使当前正在显示任何其他 div，我知道我必须获得当前活动的 div 并将其 li 元素设置为活动或类似的东西，但我仍然缺乏 jQuery 经验（需要用 jQuery 来做）并且似乎无法做到。

任何提示将不胜感激。

Answer 1

您只需要为您的按钮添加一个点击侦听器，您可以使用它来打开模式并在第一个选项卡上手动触发点击。

代码如下：

$(function(){
$('#modal-btn').click(function () {
  $("#modalFormUlId a:eq(0)").click();
  // or
 //$('#modalFormUlId a:first').tab('show');

});
});

这是工作示例http://jsfiddle.net/0mvt0qe5/3/

Answer 2

单击任何 li，将活动选项卡存储在 localStorage 中，当您点击按钮时，您可以检查活动选项卡是否具有任何 localStorage 值并相应地使它们处于活动状态。希望这会帮助你。如果您在使用它时遇到任何问题，请告诉我。 尝试这样做： 根据您的活动选项卡设置 localStorage，您可以提供任何选项卡的 onclick 事件

localStorage.setItem("activeTab", "Archivos");

使用localStorage.getItem("activeTab")，基于将活动类添加到选项卡