Question

我尝试了以下操作来创建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>

我展示的内容如下：

First
Second
Third

标签1内容

标签2内容

标签3内容

我错过了必要的jquery库吗？我应该使用哪一个？

Answer 1

您是否包含了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>

Answer 2

您需要包含jQuery UI css文件。

应用tabs()会设置以下类：ui-tabs-hide

但是如果没有jQuery UI CSS文件，您的浏览器将无法隐藏此元素。

使用Google Chrome，Inspect元素，您将看到添加到元素中的类。我提供了一个jsfiddle作为例子：

http://jsfiddle.net/TjNAw/

您可以从主题滚动下载和自定义您的jQuery UI CSS文件：

http://jqueryui.com/themeroller/

JQuery选项卡无法正常显示

2 个答案: