JQuery选项卡未正确显示

为了创建Jquery选项卡，我尝试了以下操作：

    <div id="tabs">
    <ul>
      <li><a href="#tabs-1">First</a></li>
      <li><a href="#tabs-2">Second</a></li>
      <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">
      <p>Tab 1 content</p>
    </div>
    <div id="tabs-2">
      <p>Tab 2 content</p>
    </div>
    <div id="tabs-3">
     <p>Tab 3 content</p>
    </div>
    </div>  

    <script type="text/javascript" language="javascript">
    $(document).ready(function () {

        $("#tabs").tabs();

    });
    </script>

表1内容

表2内容

表3内容

---

我是否缺少必要的jquery库？我应该用哪一个

您是否包含jQuery UI css和js文件？您可以像这样从CDN添加它

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

---

您需要包括jQuery UI css文件。

应用

tabs（）

将设置如下类：

ui-tabs-hide

但是如果没有jQueryUICSS文件，浏览器将不知道如何隐藏该元素

使用GoogleChrome检查元素，您将看到添加到元素中的类。我提供了一个JSFIDLE作为示例：

您可以从主题滚轴下载并自定义jQuery UI CSS文件：

---

您是否记得包含jQuery UI库和CSS？这更多的是一个注释，而不是一个答案。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>