2011-03-08 149 views
5

我有以下腳本不起作用。它應該是使用jQuery標籤,但該鏈接不轉換爲標籤由於某些原因:jquery ui選項卡不工作

<!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> 
+2

是否包含所有'CSS'? – diEcho

+0

是的,請參閱上面編輯的問題。 – oshirowanen

回答

0

爲您的的jsfiddle文件,你需要在小提琴預期的格式輸入您的頁面。只有HTML面板中的HTML和javascript面板中的JS。你的HTML應該只包含body元素中的內容。你的JS應該只包含腳本標籤內的內容。您不應該包含DOCTYPE,body或html元素。您不應該包含腳本標籤本身。請參閱此處的文檔:http://doc.jsfiddle.net/basic/introduction.html#entering-code。如果你這樣做的話,代碼將會工作。

一旦你完成了,你只需要包含/引用正確的樣式的CSS,它將顯示爲一個選項卡式界面。對於您的獨立文檔,這就是所有需要完成的工作。

+0

您在原始問題中看到的代碼是我在個人服務器上使用的代碼,它不起作用。 – oshirowanen

+3

@oshirowanen - 這是因爲CSS的URL是錯誤的。嘗試http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css - 或其他一些主題。請參閱http://jsfiddle.net/Cv5AY/7/請注意,除了修改代碼以適合Fiddle的輸入規則外,我還將該CSS文件添加爲資源。 – tvanfosson

+0

這不回答OP的問題。 – 8bitjunkie