jquery ui tabs不工作

osh*_*nen 5 jquery jquery-ui jquery-ui-tabs

我有以下脚本不起作用.它应该使用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>
Run Code Online (Sandbox Code Playgroud)

tva*_*son 0

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

完成后,您只需要包含/引用执行样式设置的正确 CSS,它将显示为选项卡式界面。对于您的独立文档,这就是需要完成的全部工作。

  • @oshirowanen —— 那是因为 CSS 的 url 是错误的。尝试http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css - 或其他一些主题。请参阅 http://jsfiddle.net/Cv5AY/7/ 请注意,除了修改代码以适应 Fiddle 的输入规则之外,我还将该 CSS 文件添加为资源。 (3认同)