Question

根据哪个标签处于活动状态，我需要显示2个不同的div。

如果tab＆＃34; #myTab类概述＆＃34;然后是＆＃34;出租div＆＃34;应该表明。如果＆＃34; #myTab类概述＆＃34;并没有活跃他们的＃home; homeo div＆＃34;应该显示。

我的功能在页面加载时不起作用，在页面加载时会出现两个div。如果我单击任一选项卡，那么只能使我的功能正常工作。

你知道如何使我的功能在页面加载上工作。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rental">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">DOWNLOAD APPLICATION</a>
</div>


<div id="homeo">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">Test</a>
</div>

	
	
  <ul class="nav nav-pills">
    <li id="myTab" class="overview active"><a data-toggle="tab" href="#home">RENTAL</a></li>
    <li><a data-toggle="tab" href="#homeowner">HOMEOWNER</a></li>
  </ul>

＆＃13;

Answer 1

为什么不使用CSS或style属性来隐藏pageload上的元素。假设您只想在页面加载时显示租借

<div id="homeo" style="display:none;">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">Test</a>
</div>

或使用CSS

#homeo {
    display: none;
}

Answer 2

.className是原生javascript。 jQuery对象没有这个属性。

您想使用$("#myTab")[0].hasClass('overview')

jQuery hasClass documentation

Answer 3

您需要在页面加载时调用隐藏/显示代码以及选项卡单击

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

            });
        })

Answer 4

这是演示

https://jsfiddle.net/jalayoza/cnsLfbza/

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

            });
        }) 



<div id="rental">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">DOWNLOAD APPLICATION</a>
</div>


<div id="homeo">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">Test</a>
</div>



  <ul class="nav nav-pills">
    <li id="myTab" class="overview active"><a data-toggle="tab" href="#home">RENTAL</a></li>
    <li><a data-toggle="tab" href="#homeowner">HOMEOWNER</a></li>
  </ul>

在单击Bootstrap选项卡之前，Jquery无法隐藏和显示div

4 个答案: