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

Does jQuery UI operate solely within the HTML document?

本文关键字：文档 运行 HTML UI 是否 jQuery      更新时间：2023-09-26

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

这与我在我的第一个jQuery网站上遇到的一些javascript有关。你看，我刚刚完成了Javascript，HTML/CSS和jQuery的课程（都在Codecademy）。我正在尝试使用 jQuery UI 选项卡将选项卡插入网站。但是，当我将HTML文档链接到单独的javascript（.js）文档时，它不起作用。将显示选项卡，但每个选项卡的内容都在第一页上集中在一起（而不是分类到每个单独的选项卡中）。当我单击每个选项卡时，正文似乎没有变化。我已经在网上和这个网站上搜索了答案，但没有运气。我看过的所有教程都已经过时了。"选项卡"的"API 文档"中提供的语法对我来说似乎不清楚。这是我的代码：

HTML： 网页设计1.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();
});

把你的 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>

编辑：固定脚本顺序。

相关文章：