1

我尝试了以下方法来创建 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 库？我应该使用哪一个？

4

2 回答 2

2

你是否包含了 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>
于 2012-07-25T16:36:53.187 回答
0

您需要包含 jQuery UI css 文件。

应用tabs()将设置类，例如：ui-tabs-hide

但是如果没有 jQuery UI CSS 文件，您的浏览器将不知道隐藏这个元素。

使用谷歌浏览器，检查元素，你会看到添加到元素中的类。我提供了一个 jsfiddle 作为示例：

http://jsfiddle.net/TjNAw/

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

http://jqueryui.com/themeroller/

于 2012-07-25T16:38:09.880 回答