JavaScript 在 JSFiddle 中运行,但不能独立运行

标签 javascript jquery ajax html css

我不知道这段代码中发生了什么:/。代码是正确的,我什至附加了 jQuery 库文件,但它仍然不能正常工作。我想为选定的 li 应用一个类,而不是其余的。

<html>
    <head>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
        <style type="text/css">
            a.active {
                background-color:yellow;
            }
        </style>
        <script>
             $('li a').click(function(e) {
                    e.preventDefault();
                    $('a').removeClass('active');
                    $(this).addClass('active');
              });
        </script>
    </head>
    <body>
        <ul>
            <li><a href="#1">Photography</a></li>
            <li><a href="#2">Web</a></li>
            <li><a href="#3">Print</a></li>
        </ul>
    </body>
</html>

http://jsfiddle.net/rq9UB/

最佳答案

更改为:

<script>
$(document).ready(function(){
    $('li a').click(function (e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });
});
</script>

我添加了一个 ready()函数:DOM 完全加载时执行的函数。

发生的事情是,当 jQuery 正在寻找那些元素以附加点击处理程序时,它们尚未加载,因此 $('li a') 为空。

另一种方法是将脚本放在 body 标记结束之前。

关于JavaScript 在 JSFiddle 中运行,但不能独立运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19183308/

相关文章:

php - 如何将 XML 文件从服务器动态保存到本地计算机?

javascript - 是否可以更改项目内的属性并返回项目本身?

javascript - 用于视差效果的 css 剪辑 mask

javascript - 我们可以在 cart.liquid 文件中添加送货和账单地址表单吗?

javascript - 数据库不更新用户密码重置

javascript - 如何等待 'end' 事件的 'resize' 之后才执行操作?

javascript - 在 medium.com 等特定图片上滚动时隐藏社交链接

javascript - 将 json 数据存储在代理模式内的变量中

ajax - 一个简单的 Ajax + SEO 解决方案?

jquery - 在 Jquery/HTML 上实现拖放功能