Javascript jquery中的选项卡小部件根本不显示

我目前正在处理一个web表单，在运行页面时，我的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>

$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
} );

这个在身体里面：

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>

div id=“tabs”>

,

您缺少为页面添加基本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>

$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
} );

,

您的css文件没有指向任何内容。您需要使用一个jQueryUI主题。下面的代码段将CDN用于jQuery UI Excite Bike主题：

$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
} );





表1的内容

表2的内容

您有两个“Tab-1”ID。您不需要id为“tabs-1”的第一个div中的第二个div
 ID必须是唯一的