DEMO

Question

如果Bootstrap选项卡未激活，我想删除div（如下所示）。

要删除的Div：

<div id="myCarousel"> ... </div>

显示以上div：

<li class="overview active">

删除#myCarousel div：

<li class="overview">

我的JavaScript尝试如下，但它不起作用：

<script type="text/javascript">
    jQuery( document ).ready(function() {
        jQuery('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function ( e) {
          if ( e.target.parent().hasClass('overview.active') )
            jQuery('#myCarousel').show();
          else
            jQuery('#myCarousel').hide();
    });
})
</script>

有什么想法吗？

Answer 1

试试这个：

DEMO

HTML：

 <div id="myCarousel"> sfsdfsdfsdf </div>
        <ul class="nav nav-tabs" role="tablist">
  <li id="myTab" class="overview active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

SCRIPT：

  jQuery(document).ready(function () {
            jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                if ($("#myTab")[0].className=='overview active')
                    jQuery('#myCarousel').show();
                else
                    jQuery('#myCarousel').hide();
            });
        })

Answer 2

试

 $(e.target).parent().is('.overview.active');

OR

$(e.target).parent().hasClass("overview active");

Answer 3

尝试使用＆＃39;有效的＆＃39;只有：

if( e.target.parent().hasClass( 'active' )
    $("#myCarousel").show();
else 
    $("#myCarousel").hide();

Answer 4

if ( $('li').hasClass('active') ){
   jQuery('#myCarousel').show();
 }
else {
 jQuery('#myCarousel').hide();
}

如果Bootstrap选项卡未激活，则jQuery删除div

4 个答案:

DEMO