JavaScript可以在JSFIDLE中工作，但不能单独工作_Javascript_Jquery_Ajax_Html_Css

JavaScript可以在JSFIDLE中工作，但不能单独工作

javascript jquery ajax html css

JavaScript可以在JSFIDLE中工作，但不能单独工作,javascript,jquery,ajax,html,css,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">

我不知道这段代码中发生了什么：/。代码是正确的，我甚至还附加了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>


a、 活跃的{
背景颜色：黄色；
}
$（'li a'）。单击（函数（e）{
e、 预防默认值（）；
$（'a'）.removeClass（'active'）；
$（this.addClass（'active'）；
});

更改为：

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


$（文档）.ready（函数（）{
$（'li a'）。单击（函数（e）{
e、 预防默认值（）；
$（'a'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});

我添加了一个函数：在DOM完全加载时执行的函数

发生的情况是，当jQuery寻找那些元素来附加click处理程序时，它们还没有被加载，所以

$（'li a'）

是空的

另一种选择是在关闭body标记之前插入脚本。

正确使用：

尝试以下操作，不同之处在于不等待dom就绪，因为您可以看到dom在脚本之前已经加载。此外，在页面末尾添加脚本被认为是一种良好的做法

<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>
</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>
    <script>
         $('li a').click(function(e) {
                e.preventDefault();
                $('a').removeClass('active');
                $(this).addClass('active');
          });
    </script>
</body>


a、 活跃的{
背景颜色：黄色；
}





$（'li a'）。单击（函数（e）{
e、 预防默认值（）；
$（'a'）.removeClass（'active'）；
$（this.addClass（'active'）；
});

人们不喜欢被人叫喊..阅读：你可以将你的js脚本放在页面的末尾，以确保dom已经加载。你忘记定义函数（）你的脚本无效，你需要将函数引用传递给

ready

，所以应该是：

.ready（function（）{…

），然后这里的措辞是-“当jQuery在单击处理程序中查找这些元素时，它们尚未加载。“-不正确。它不在单击处理程序中，因为单击处理程序从不存在；当它试图查找元素以创建事件处理程序时，找不到元素。@AnthonyGrist，说得好！已更正为

以附加单击处理程序

@Sergio谢谢：）…正在工作….！没有使用jquery lib文件，有没有其他方法可用？@Munna，很高兴我能帮上忙！你是说一个简单的javascript解决方案吗？是的，只是需要更多的代码。简单的javascript速度更快，但要编写更多的代码。

<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>
</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>
    <script>
         $('li a').click(function(e) {
                e.preventDefault();
                $('a').removeClass('active');
                $(this).addClass('active');
          });
    </script>
</body>