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

【问题标题】：Does jQuery UI operate solely within the HTML document?jQuery UI 是否仅在 HTML 文档中运行？
【发布时间】：2013-09-15 17:49:32
【问题描述】：

冒着听起来缺乏经验的风险（我是），我觉得有必要问一个非常简单的问题：jQuery UI 是否仅在 HTML 文档中运行？

这与我在我的第一个 jQuery 网站上遇到的一些 javascript 问题有关。你看，我刚刚完成了关于 Javascript、HTML/CSS 和 jQuery 的课程（都在Codecademy）。我正在尝试使用jQuery UI Tabs 将标签插入网站。但是，当我将 HTML 文档链接到单独的 javascript (.js) 文档时，它不起作用。选项卡出现了，但是每个选项卡的内容都集中在第一页上（而不是被分类到每个单独的选项卡中。）当我单击每个选项卡时，正文似乎没有改变。我已经在网上和这个网站上搜索了答案，但都没有运气。我看过的所有教程都过时了。 “Tabs”的“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();
});

【问题讨论】：

您面临的问题可能是 JavaScript 中的一个错误，例如语法错误，它会阻止 jQuery 选项卡正确构建选项卡。查看错误控制台，看看出了什么问题。您最初的问题的答案是“是”，但在这种情况下，这无关紧要。
How to open the JavaScript console in different browsers?

标签： javascript jquery jquery-ui user-interface tabs

【解决方案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>

编辑：脚本的固定顺序。

【讨论】：

你试过了吗？虽然将 JS 放在底部不会自动出错，但您建议包含文件的顺序必然会导致崩溃。我也看不出将 JS 文件放到不同的位置会如何解决 OPs 问题
我不能在 jsfiddle 中包含 HTML 标签，否则我会尝试一下。但是，这个顺序肯定是错误的，因为我最初打算更正，并且肯定会导致 Jquery 代码无法正常工作。
但是为什么不工作的 JavaScript 会因为你将它从文档头部移到底部而突然开始工作呢？这样做可能会提高性能，但不能修复错误，对吗？
感谢你们两位，甚至考虑回答我的问题。而且，看到我仍然掌握将我学到的知识应用到实际网站的窍门，即使是像“重新排列你在那里的那些标签的顺序将提高性能”这样的快速小技巧也给了我很大的帮助。所以谢谢你们俩！（虽然我不确定我是否会在这种情况下使用它，但如果（如 Pekka 所说）建议的顺序可能会导致崩溃。）
@RexReaver 不，这实际上是列出脚本的正确顺序，它不应该使您的页面崩溃。我不小心把它们放在了原来的顺序（在我编辑之前），这就是 Pekka 首先说的，最初对我投了反对票。但是，由于您加载脚本的方式，它很可能是一个正确的答案。在我纠正我的答案之前，他只是回复/否决了。