jQuery UI是否仅在HTML文档中运行？

Question

At the risk of sounding inexperienced (which I am), I feel the need to ask the very simple question: does jQuery UI operate solely within the HTML document? 冒着听起来没经验的风险（我是），我觉得有必要问一个非常简单的问题： jQuery UI是否仅在HTML文档中运行？

It relates to a problem I'm having with some javascript on my very first jQuery website. 它与我在第一个jQuery网站上使用某些JavaScript时遇到的问题有关。 You see, I've just finished a course on Javascript, HTML/CSS, and jQuery each (all at Codecademy .) I'm trying to use jQuery UI Tabs to insert tabs into the website. 您看，我刚刚完成了有关Javascript，HTML / CSS和jQuery的课程（所有课程都在Codecademy上完成）。我正在尝试使用jQuery UI Tabs将Tabs插入网站。 However, when I link the HTML document to a separate javascript (.js) document, it doesn't work. 但是，当我将HTML文档链接到单独的javascript（.js）文档时，它不起作用。 The tabs appear, but the content of each tab is all lumped together on the first page (instead of being sorted into each separate tab.) And when I click on each tab, the body doesn't appear to change. 这些选项卡出现了，但是每个选项卡的内容都集中在第一页上（而不是被分类到每个单独的选项卡中。）而且当我单击每个选项卡时，主体似乎没有改变。 I've searched both the web and this site for answers with no luck. 我已经在网上和这个网站上搜索了运气不好的答案。 All of the tutorials I've seen were outdated. 我看过的所有教程都已过时。 The syntax offered inside of the "API Documentation" for "Tabs" seems unclear to me. 对我来说，“ API标签”中提供的“制表符”语法似乎不清楚。 Here's my code: 这是我的代码：

HTML: webdesign1.html 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 Javascript： webdesign1.js

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

Answer 1

Put your Jquery scripts before your other scripts and at the bottom of your body like so: 将您的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>

EDIT: Fixed order of scripts. 编辑：脚本的固定顺序。

jQuery UI是否仅在HTML文档中运行？

问题描述

1 个解决方案

解决方案1
-1 2013-09-15 17:57:32

jQuery UI是否仅在HTML文档中运行？

问题描述

1 个解决方案

解决方案1 -1 2013-09-15 17:57:32

解决方案1
-1 2013-09-15 17:57:32