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

Question

I have 2 different divs that need to appear depending on which tab is active.

If tab "#myTab class overview" is active then the "rental div" should show. If "#myTab class overview" is not active them the "homeo div" should show.

My function does not work on page load, on page load both divs appear. If i click either tab then only does my function work.

Do you know how to get my function to be working on page load.

 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(); }); }) 

 <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> 

Answer 1

Why not use CSS or style attribute to hide the element on pageload. Suppose you want to only show rental at page load

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

Or with CSS

#homeo {
    display: none;
}

Answer 2

.className is native javascript. jQuery objects don't have this property.

You want to use $("#myTab")[0].hasClass('overview')

jQuery hasClass documentation

Answer 3

You need to call your hide/show code on page load alongwith tab click as

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

Here is with demo

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>