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

回答

相关问题