Question

我的网站使用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 );
    });
});

Answer 1

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

这可能是由于找不到文件或JavaScript错误造成的。启用调试并加载页面。查看404的网络记录，并在控制台上查看JS错误。您还可以检查HTML以查看DOM模型是否符合您的预期。您可以在脚本中设置一个断点，以查看是否正在访问代码 - 如果不能向后调用堆栈以查看逻辑错误的位置，并逐步执行代码。

如果您可以练习这些技能，您可以在不需要其他人帮助的情况下解决绝大多数错误。

Answer 2

导入jquery的脚本标记在URL之前缺少“http：”。这会打破你的Jquery-ui。

将其更改为：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 3

代码似乎很好。正确检查你的链接;如果可以从浏览器访问它们。

 <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>

突然，JavaScript / jQuery停止了工作

3 个答案: