将ID添加到带有.active类的DIV的子项中，并将ID移除到任何非活动状态

Question

如何将ID添加到具有类.active的DIV的子项，并且还可以在其他位置找到该ID。

当类“tab-pane”类的DIV也具有“active”类时，我想将ID“target”分配给类“template1”（或WHEN活动为“template2”）。当我点击另一个标签时，它应该检查是否在其他地方分配了“目标”以将其删除。

这里是一个小提琴：https://jsfiddle.net/7c8aek90/

HTML

<div id="Tabbie"> 
    <ul class="nav nav-tabs" id="styleTab"> 
    <li class="active"> 
     <a data-toggle="tab" href="#1">Tab 1</a> 
    </li> 
    <li> 
     <a data-toggle="tab" href="#2">Tab 2</a> 
    </li> 
    </ul> 
    <div class="tab-content"> 
    <div class="tab-pane active" id="1"> 
     <div class="row"> 
     <div class="col-md-6 templateContent"> 
      <div class="template1"> 
      Text 
      </div> 
     </div> 
     <div class="col-md-6 textContent"> 
      Text 
     </div> 
     </div> 
    </div> 
    <div class="tab-pane" id="2"> 
     <div class="row"> 
     <div class="col-md-6 templateContent"> 
      <div class="template2"> 
      Text 
      </div> 
     </div> 
     <div class="col-md-6 textContent"> 
      Text 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

我的jQuery到目前为止

if ($("div.tab-pane").hasClass('active')) { 
    $("div.tab-pane").find("div:eq(2)").attr('id', 'target'); 
} else { 
    $("div.tab-pane").find("div:eq(2)").removeAttr('id', 'target'); 
} 

谢谢！

Answer 1

这个想法是添加一个虚拟类到你想添加的每个属性id =“target”。 检查这个小提琴

Visit [Fiddle] (https://jsfiddle.net/s0e121hd/1/)!