0

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

4

3 回答 3

1

ready()的正确用法：

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


jsFiddle

于 2013-10-04T14:14:40.320 回答
1

改成这样：

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

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

发生的事情是，当 jQuery 寻找那些元素来附加点击处理程序时，它们还没有加载，所以$('li a')是一个空的。

另一种选择是将您的脚本放在正文标记关闭之前。

于 2013-10-04T14:05:42.437 回答
0

尝试以下操作，不同之处在于不等待 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>

于 2013-10-04T18:24:50.543 回答