0

経験の浅い (私はそうです) ように聞こえるかもしれませんが、非常に単純な質問をする必要があると感じています。jQuery UI は HTML ドキュメント内でのみ動作しますか?

これは、最初の jQuery Web サイトで JavaScript を使用して発生した問題に関連しています。ほら、Javascript、HTML/CSS、jQuery のコースをそれぞれ (すべてCodecademyで) 終えたところです。jQuery UI タブを使用して Web サイトにタブを挿入しようとしています。ただし、HTML ドキュメントを別の JavaScript (.js) ドキュメントにリンクすると、機能しません。タブは表示されますが、各タブのコンテンツはすべて最初のページにまとめられています (個別のタブごとに並べ替えられるのではなく)。また、各タブをクリックしても、本文は変化していないように見えます。私はウェブとこのサイトの両方で答えを探しましたが、うまくいきませんでした。私が見たチュートリアルはすべて時代遅れでした。「タブ」の「API ドキュメント」内で提供される構文は、私には不明確なようです。ここ'

HTML: webdesign1.html

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>
        Your Company Name!
    </title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link type="text/css" rel="stylesheet" href="webdesign1.css"/>
        <script type="text/javascript" src="webdesign1.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $(".tabs").tabs();
            });
        </script>
</head>
<body>
    <div class="tabs">
        <ul>
            <li><a href=".tab1">Tab 01</a></li>
            <li><a href=".tab2">Tab 02</a></li>
            <li><a href=".tab3">Tab 03</a></li>
        </ul>
        <div class="tab1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="tab2">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="tab3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</body>
</html>

Javascript: webdesign1.js

$(document).ready(function()
{
    $(".tabs").tabs();
});
4

1 に答える 1

-1

次のように、Jquery スクリプトを他のスクリプトの前に、本文の最後に配置します。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="webdesign1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".tabs").tabs();
    });
</script>    
</body>
</html>

編集: スクリプトの固定順序。

于 2013-09-15T17:57:32.470 に答える