Skip to main content
 首页 » 编程设计

jquery ui 选项卡不工作

2026年10月29日5luoye11

我有以下脚本不起作用。它应该使用 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,它将显示为选项卡式界面。对于您的独立文档,这就是需要完成的全部工作。