jquery laufen, wenn div id hat eine Klasse

Question

Ich habe den folgenden Code, die derzeit ausgeführt wird, wenn #a-div hat focus

jQuery(document).ready(function(){ 
    jQuery('#a-div').focus(function(){ 
    if ($("#tab3").is(".tab-pane.active")) { 

     $("#another-div").hide(); 

     } 
    }); 
}); 

Aber statt id wie es zu laufen, wenn #tab3 die folgende Klasse hat .tab-pane.active

jQuery(document).ready(function(){ 
    jQuery('#tab3').is(".tab-pane.active")(function(){ 

     $("#another-div").hide(); 

    }); 
}); 

Aber ich habe nicht die richtige Syntax.

Jede Hilfe wäre sehr geschätzt, vielen Dank im Voraus!

Answer 1

Um Ihren Code arbeiten Dokument bereit:

jQuery(document).ready(function(){ 
    if(jQuery('#tab3').is(".tab-pane.active")){ 

     $("#another-div").hide(); 

    } 
}); 

Answer 2

Dieser Code-Schnipsel nur jQuery ist und keine externen Bibliotheken. Aber es dient dazu, Ihnen zu zeigen, wie man das macht.

Fügen Sie einfach einen Klick-Ereignishandler für die Klasse tab-pane hinzu und überprüfen Sie, ob das angeklickte Element die Klasse active hat.

Der andere Code in diesem Snippet ahmt nur die Switching-Klassen des Tabs nach. Jedes Mal, wenn auf eine Klasse geklickt wird, schaltet sie das div mit der Klasse output

um. Ich hoffe, dass Sie das suchen.

$(".tab-pane").click(function() { 
 
    //Ignore this code, since it's mimicking the change of tabs 
 
    changeTab($(this)); 
 
    
 
    var tab = parseInt($(this).data("tab")); 
 
    
 
    switch(tab) 
 
    { 
 
    \t case 1: 
 
    $(".output").css("border", "2px dashed red"); 
 
    break; 
 
    
 
    case 2: 
 
    $(".output").css("border", "2px dotted blue"); 
 
    break; 
 
    
 
    default: 
 
    case 3: 
 
    $(".output").css("border", "2px solid black"); 
 
    break; 
 
    } 
 
    
 
    $("#tabnr").html(tab); 
 
    
 
}); 
 

 

 

 
function changeTab(pEl) 
 
{ 
 
\t $(".tab-pane").each(function() { 
 
    \t $(this).removeClass("active"); 
 
    }); 
 
    
 
    pEl.addClass("active"); 
 
}

.tab-pane { 
 
    height: 100px; 
 
    width: 200px; 
 
    border: 2px solid black; 
 
    background-color: lightblue; 
 
    float: left; 
 
    margin-left: 15px; 
 
} 
 

 
.first { 
 
    border: 2px dashed red; 
 
} 
 

 
.second { 
 
    border: 2px dotted blue; 
 
} 
 

 
.active { 
 
    background-color: beige; 
 
} 
 

 
.clearfix { 
 
    clear: both; 
 
} 
 

 
.output { 
 
    width: 100%; 
 
    height: 50%; 
 
    background-color: lightgreen; 
 
    margin-top: 30px; 
 
    border: 2px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-pane first" data-tab="1"> 
 
    Tab 1 
 
</div> 
 
<div class="tab-pane second" data-tab="2"> 
 
    Tab 2 
 
</div> 
 
<div class="tab-pane active" data-tab="3"> 
 
    Tab 3 
 
</div> 
 

 
<div class="clearfix"></div> 
 

 
<div class="output"> 
 
    This output is altered by clicking on the tabs above. You are on tab <span id="tabnr">3</span> 
 
</div>