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

Jquery ui 标签错误

Jquery ui tabs error

html

css

tabs

jquery-ui