Fügen Sie dem untergeordneten Element des DIV ID mit der Klasse .active hinzu und entfernen Sie die ID zu einem inaktiven Element

Question

Wie kann ich dem untergeordneten Element eines DIVs, das die Klasse .active hat, eine ID hinzufügen und die ID auch entfernen, wenn sie woanders gefunden wird.

Ich möchte die ID "target" der Klasse "template1" (oder WHEN aktiv zu "template2") zuweisen, wenn das DIV mit der Klasse "tab-pane" auch die Klasse "active" hat. Und wenn ich auf die andere Registerkarte klicke, sollte überprüft werden, ob "target" an anderer Stelle zugewiesen wurde, um es zu entfernen. Hier

ist eine Geige: 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> 

Meine jQuery so weit

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'); 
} 

Dank!

Answer 1

Die Idee ist, fügen Sie eine Dummy-Klasse zu jedem, das Sie Attribut ID = "Ziel" hinzufügen möchten. Sehen Sie sich diese Geige

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