Question

我有以下脚本不起作用。它应该使用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>

Answer 1

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

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

jquery ui tabs不工作

1 个答案: