2011-03-08 10 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

関連する問題