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

Question

我有 2 个不同的 div 需要显示，具体取决于哪个选项卡处于事件状态。

如果选项卡“#myTab class overview”处于事件状态，则应显示“rental div”。如果“#myTab 类概述”未激活，则应显示“homeo div”。

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

你知道如何让我的函数在页面加载时工作。

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

为什么不使用 CSS 或样式属性在页面加载时隐藏元素。假设您只想在页面加载时显示租金

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