jQuery的切換兩個div

我有兩個選項卡，如圖所示：jQuery的切換兩個div

<div class="tab-content"> 

    <div role="tabpanel" class="tab-pane fade in active" id="script-submit"> 
     <input type="checkbox" id="cflow_flag"> Enable Coverage report<br> 
     <button type="button" id="submit-job" class="btn btn-primary">Submit</button> 
    </div> 

    <div role="tabpanel" class="tab-pane fade" id="commit-view"> 
     <button type="button" id="submit-cflow" class="btn btn-primary">Submit</button> 
    </div> 

</div>

在檢查/取消勾選框，我需要與$('#commit-view #submit-cflow')按鈕

注意切換$('#script-submit #submit-job)按鈕：請注意，只有#script-submit和#commit-view中的一個將在任何給定時間處於活動狀態

來源

2017-04-24 Viswajith Kalavapudi

看到這個答案在正確的方向上推：http://stackoverflow.com/questions/4177159/toggle-checkboxes-on-off –

是你的代碼，你試過了什麼。我們在這裏提供幫助，但前提是您已嘗試過並向我們展示您嘗試過的內容。 –

您的checkbox不應位於tabpanel之內。如果您想根據checkbox狀態進行切換，則必須默認隱藏一個元素。請嘗試以下操作：

$('#commit-view').hide(); 
 
$('#cflow_flag').change(function(){ 
 
    if($(this).is(":checked")) { 
 
     $('#commit-view').show(); 
 
     $(this).siblings().hide(); 
 
    } else { 
 
     $(this).siblings().show(); 
 
     $('#commit-view').hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane fade in active" id="script-submit"> 
 
     <input type="checkbox" id="cflow_flag"> Enable Coverage report<br> 
 
     <button type="button" id="submit-job" class="btn btn-primary">Submit 1</button> 
 
    </div> 
 

 
    <div role="tabpanel" class="tab-pane fade" id="commit-view"> 
 
     <button type="button" id="submit-cflow" class="btn btn-primary">Submit 2</button> 
 
    </div> 
 
</div>

來源

2017-04-24 23:19:23 Mamun

我不能從該選項卡拉出複選框，它屬於該選項卡 –

@Viswajith Kalavapudi，我已經更新了代碼。請檢查。 – Mamun

您可以在默認情況下使用CSS隱藏其中之一，並應用此jQuery腳本，雙方使用toggle()：

jQuery('#cflow_flag').on("change", function() { 
 
    jQuery('#submit-job').toggle(); 
 
    jQuery('#submit-cflow').toggle(); 
 
});

#submit-cflow { 
 
    display: none; 
 
    color: green; 
 
} 
 
#submit-job { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-content"> 
 

 
    <div role="tabpanel" class="tab-pane fade in active" id="script-submit"> 
 
     <input type="checkbox" id="cflow_flag"> Enable Coverage report<br> 
 
     <button type="button" id="submit-job" class="btn btn-primary">Submit</button> 
 
    </div> 
 

 
    <div role="tabpanel" class="tab-pane fade" id="commit-view"> 
 
     <button type="button" id="submit-cflow" class="btn btn-primary">Submit</button> 
 
    </div> 
 

 
</div>

來源

2017-04-24 23:45:58 Johannes

所以我實現了一個答案，我不完全是hap py，但是對我來說這是個騙局。我想看看是否有一個複雜的解決方案

<div class="tab-content"> 

    <div role="tabpanel" class="tab-pane fade in active" id="script-submit"> 
     <input type="checkbox" id="cflow_flag"> Enable Coverage report<br> 
     <button type="button" id="submit-job" class="btn btn-primary">Submit</button> 
     <button type="button" id="submit-cflow" class="btn btn-primary hidden">Submit</button> 
    </div> 

    <div role="tabpanel" class="tab-pane fade" id="commit-view"> 
     <button type="button" id="submit-cflow" class="btn btn-primary">Submit</button> 
    </div> 

</div>

和我的JS是

$('#script-submit #cflow_flag').change(function(){ 
    $('#script-submit #submit-job').toggleClass('hidden'); 
    $('#script-submit #submit-cflow').toggleClass('hidden'); 
});

來源

2017-04-26 21:42:25

jQuery的切換兩個div

回答

相關問題