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

Question

我目前正在使用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>

以及体内的这个：

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主题之一。下面的代码段将CDN用于jQuery UI Excite Bike主题：

$(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。您不需要第一个div内ID为“ tabs-1”的第二个div。