0

我在 chrome 扩展中使用来自 jquery UI 的选项卡。它适用于现有的 DOM 元素，但是，在插入一些新元素并运行之后

$(function(){
        $( "div" ).tabs();
 });

再次，新元素没有 jquery 选项卡的外观。

我的html文件：

<div id="tabs">
  <h3 id = "tabId">Tab ID</h3>
  <ul>
    <li><a href="#0">Main Frame</a></li>
  </ul>
  <div id="0">
  </div>
</div>

运行脚本后的html；取自控制台 TabStructure

  <link rel="stylesheet" href="./jquery-ui-1.10.3/themes/base/jquery-ui.css">
  <script src="./jquery-ui-1.10.3/jquery-1.9.1.js"></script>
  <script src="./jquery-ui-1.10.3/ui/jquery-ui.js"></script>
  <link rel="stylesheet" href="./jquery-ui-1.10.3/demos/demos.css">
  <script src="background.js"></script>

  <script src="tabStructure.js"></script>


</head>
<body>

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible">
  <!-- this works -->
  <h3 id="tabId">Tab ID</h3>
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="0" aria-labelledby="ui-id-1" aria-selected="true"><a href="#0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Main Frame</a></li>
  </ul>
  <div id="0" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs ui-widget ui-corner-all ui-tabs-collapsible" role="tabpanel" aria-expanded="true" aria-hidden="false">

    <p>Process ID : 130</p>

    <ul> <!-- this part does not get processed by jquery ui-->
      <li><a href="#18">Sub_Frame: 18</a></li>
      <li><a href="#19">Sub_Frame: 19</a></li>
   </ul>

    <div id="18" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible">Frame ID : 18</div>
    <div id="19" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible">Frame ID : 19</div></div>
</div>



</body></html>
4

2 回答 2

2

您需要refresh()在更改 DOM 结构后调用该方法：

$( "div" ).tabs( "refresh" );

请注意，这假设您事先已初始化插件

于 2013-08-27T17:55:53.803 回答
0

您可能必须执行refresh插件的方法来考虑初始化后添加的新 DOM 元素：

$('div').tabs('refresh');

文档

于 2013-08-27T17:57:41.650 回答