0

冒着听起来缺乏经验的风险（我是），我觉得有必要问一个非常简单的问题：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();
});
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 回答