html - Jquery ui 选项卡错误

Question

我使用 jquery ui 创建选项卡，我想在单击后显示选项卡。但是标签标题出现在点击索引页面之前。我怎么解决这个问题？(共享图像中的每小时预报、10 天预报)

CSS

#tabs1{font-size: 14px;

}
.ui-widget-header {
    border: 1px solid #b9cd6d;
    color: #FFFFFF;
    font-weight: bold;
}

HTML

<div id="tabs1">
  <ul>
    <li><a href="#here">Hourly Forecast</a></li>
    <li><a href="#here_table">10 Days Forecast</a></li>
  </ul>

   <div id="here"></div>
   <div id="here_table"></div>

</div>

jQuery

jQuery.noConflict();     
$(document).ready(function() {
    $("#tabs1").tabs();
});

Answer 1

我为您创建了工作示例。您可以像这样在页面加载后隐藏选项卡:

var tabs = jQuery('#tabs1');
tabs.hide();

然后在点击按钮后显示:

 jQuery('#someButtom').on('click', function() {
    tabs.show();
    jQuery("#tabs1").tabs();
});

jsfiddle 上的工作示例:example