jquery 中的标签小部件根本没有显示

Question

我目前正在处理网络表单，当我运行 page.I 将其包含在 header 中时，我的 jquery 选项卡没有显示：

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    $( "#tabs" ).tabs();
} );
</script>

和 body 里面的这个：

div id="tabs">
  <div id="tabs-1">
    <div id="tabs-1">
      <p>...</p>
    </div>
  </div>

  <div id="tabs-2">
      <p>,,,</p>
  </div>

  <ul>
    <li><a href="#tabs-1">Next</a></li>
    <li><a href="#tabs-2">Next2</a></li>
  </ul>

 </div>

Answer 1

您没有为您的页面添加基本 jquery-ui 主题以具有默认样式。只需添加以下行。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

您的完整页面将如下所示：

<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function(){
    $( "#tabs" ).tabs();
} );
</script>

<div id="tabs">
  <div id="tabs-1">
    <div id="tabs-1">
      <p>...</p>
    </div>
  </div>

  <div id="tabs-2">
      <p>,,,</p>
  </div>

  <ul>
    <li><a href="#tabs-1">Next</a></li>
    <li><a href="#tabs-2">Next2</a></li>
  </ul>

 </div>

Answer 2

您 css 文件未指向任何内容。您需要使用 jQuery UI 主题之一。下面的代码片段使用 jQuery UI Excite Bike 主题的 CDN：

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

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/excite-bike/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Next</a></li>
    <li><a href="#tabs-2">Next2</a></li>
  </ul>

  <div id="tabs-1">
    <div>
      <p>Content for tab 1</p>
    </div>
  </div>

  <div id="tabs-2">
      <p>Content for tab 2</p>
  </div>


 </div>

Answer 3

您有两个 "tabs-1" ID。您不需要 ID 为 "tabs-1" 的第一个 div 中的第二个 div。

jquery 中的标签小部件根本没有显示

Tab widgets in jquery not showing at all

html

javascript

jquery

jquery-ui

jquery-ui-tabs