jquery ui 选项卡不工作
我有以下脚本不起作用。它应该使用 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>
I have the following script which does not work. it should be using jquery tabs, but the links are not converting to tabs for some reason:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对于 jsfiddle 上的文档，您需要以 Fiddle 期望的格式输入页面。 HTML 面板中仅包含 HTML，而 javascript 面板中仅包含 JS。您的 HTML 应该只包含 body 元素内部的内容。您的 JS 应该只包含 script 标记内的内容。不应包含 DOCTYPE、body 或 html 元素。您不应包含脚本标记本身。请参阅此处的文档：http://doc.jsfiddle.net/basic/introduction。 html#输入代码。如果您这样做，该代码将起作用。
完成后，您只需要包含/引用执行样式的正确 CSS，它将显示为选项卡式界面。对于您的独立文档，这就是需要完成的全部工作。
For your document on jsfiddle, you need to enter your page in the format that Fiddle expects. Only the HTML in the HTML panel and only the JS in the javascript panel. Your HTML should only include what goes inside the body element. Your JS should only include what goes inside the script tag. You shouldn't include DOCTYPE, body, or html elements. You shouldn't include the script tag itself. See the documents here: http://doc.jsfiddle.net/basic/introduction.html#entering-code. The code will work if you do this.
Once you have that done, you only need to include/reference the correct CSS that does the styling and it will display as a tabbed interface. For your standalone document, this is all that needs to be done.