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为＃step3元素然后关闭我的窗口并再次打开它＃tab3 div仍会显示。）

我的问题出现在尝试在重新打开窗口后将另一个li元素设置为活动时，因为即使当前正在显示的任何其他div，＃step1仍然显示为活动的，我知道我必须得到当前活动的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")，根据该选项卡添加活动类

如何动态或手动将标签窗格设置为活动

2 个答案: