jquery ui标签不起作用答案

【问题标题】：jquery ui tabs not workingjquery ui标签不起作用
【发布时间】：2011-03-08 12:48:33
【问题描述】：

我有以下脚本不起作用。它应该使用 jquery 选项卡，但由于某种原因链接没有转换为选项卡：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

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

</head>
<body>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, </p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus </p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. </p>
    </div>
</div>
</body>
</html>

【问题讨论】：

你包括所有CSS吗？
是的，请参阅上面已编辑的问题。

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

对于您在 jsfiddle 上的文档，您需要以 Fiddle 期望的格式输入您的页面。只有 HTML 面板中的 HTML 和 javascript 面板中的 JS。您的 HTML 应该只包含 body 元素中的内容。您的 JS 应该只包含脚本标签内的内容。不应包含 DOCTYPE、body 或 html 元素。您不应该包含脚本标签本身。请参阅此处的文档：http://doc.jsfiddle.net/basic/introduction.html#entering-code。如果您这样做，代码将起作用。

完成后，您只需包含/引用正确的 CSS 样式，它就会显示为选项卡式界面。对于您的独立文档，这就是所有需要完成的工作。

【讨论】：

您在原始问题中看到的代码是我在个人服务器上使用的代码，它不起作用。
@oshirowanen -- 这是因为 CSS 的 url 错误。试试ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/… - 或其他一些主题。请参阅jsfiddle.net/Cv5AY/7 请注意，除了修改您的代码以适应 Fiddle 的输入规则之外，我还将该 CSS 文件添加为资源。
这并没有回答来自 OP 的问题。
@8bitjunkie - 在被编辑之前就已经完成了。我怀疑这个问题在评论中确实得到了解决，以更正 CSS 文件的 URL。