0

我的网站在 jQuery Ui 上运行得非常好，但突然间我改变了颜色，它停止了！任何提示为什么会发生这种情况？我尝试在 HTML 文件本身中编写 JavaScript，并将其链接为单独的 .js 文件。两者似乎都不起作用。

我的 HTML： 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Spree 2014 | BITS - Pilani, K. K. Birla Goa Campus Sports Festival</title>

    <link rel="stylesheet" type="text/css" href="teaser.css" />
    <LINK REL="SHORTCUT ICON" HREF="http://s9.postimg.org/jtx29pdbf/bits.png" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script type="text/javascript" src="teaser.js"></script>

</head>

<body>
    <div id="sidebar">
        <img src = "images/arrow.png" alt = "Click to open" id = "arrow">
    </div>

        <div id ="gallery" class = "hidden"><div class="text">Gallery</div></div>
        <div id = "lookback" class = "hidden"><div class="text">Lookback</div></div>
        <div id = "timer" class = "hidden"><div class="text">Timer</div></div>

    <div id="social">
        <a href="https://www.facebook.com/bitsspree?fref=ts"><img src="images/fb.png" alt = "Contact us on Facebook" id = "fb"></a>
        <a href="https://twitter.com/bitsspree"><img src="images/twitter.png" alt = "Stay tuned on twitter" id = "twitter"></a>
    </div>

    <div id="tabs">
            <ul>
                <li><a href="">About</a></li>
                <li><a href="">Sponsors</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">Subscribe</a></li>
            </ul>
    </div>
    <div>

    <div id="logo">
        <img src="images/spreelogo.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
    </div>

    <div id="bits">
        <img src="images/bits.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
    </div>

    <div id="man">
        <img src="images/runningman.png" alt="Spree Pure Sport | Run | Rise | Reach"></img>
    </div>
</body>

我的 JS 文件：

$(document).ready(function(){
    $("#bits").hide();
    $("#lookback").hide();
    $("#timer").hide();
    $("#arrow").click(function(){
        $("#sidebar").hide();
        $("#gallery").show( "fold", 2000 );
        $("#lookback").show( "fold", 2000 );
        $("#timer").show( "fold", 2000 );
    });
});
4

3 回答 3

4

此类问题通常可以使用浏览器中的开发人员工具轻松解决。我最喜欢的是 Firefox 中的 Firebug，但每个现代浏览器都有您需要的功能。

这可能是由于找不到文件或 JavaScript 错误引起的。启用调试并加载您的页面。在网络记录中查看 404，在控制台中查看 JS 错误。您还可以检查您的 HTML 以查看 DOM 模型是否符合您的预期。你可以在你的脚本中设置一个断点来查看代码是否被到达——如果没有，你可以向后调用堆栈来查看逻辑错误的地方，然后单步执行代码。

如果你能练习这些技巧，你就可以解决绝大多数的错误，而不需要别人的帮助。

于 2013-07-18T12:11:44.890 回答
1

您的导入 jquery 的脚本标记在 URL 前缺少“http:”。那会破坏你的 Jquery-ui。

将其更改为：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-07-18T11:53:22.317 回答
0

代码看起来不错。正确检查您的链接；如果它们可以从您的浏览器访问。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script type="text/javascript" src="teaser.js"></script>
于 2013-07-18T11:53:24.033 回答