我有以下脚本不起作用。它应该使用 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>
最佳答案
对于 jsfiddle 上的文档，您需要以 Fiddle 期望的格式输入页面。 HTML 面板中仅包含 HTML，而 javascript 面板中仅包含 JS。您的 HTML 应该只包含 body 元素内部的内容。您的 JS 应该只包含 script 标记内的内容。不应包含 DOCTYPE、body 或 html 元素。您不应包含脚本标记本身。请参阅此处的文档:http://doc.jsfiddle.net/basic/introduction.html#entering-code 。如果您这样做，代码将起作用。
完成后，您只需包含/引用执行样式设置的正确 CSS，它将显示为选项卡式界面。对于您的独立文档，这就是需要完成的全部工作。
关于jquery ui 选项卡不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5232668/