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

これに変更します。

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

ready()関数を追加しました。これは、DOM が完全にロードされたときに実行する関数です。

何が起こっていたかというと、jQuery がクリック ハンドラーをアタッチするためにこれらの要素を探していたときに、まだ読み込まれていないため$('li a')空でした。

もう 1 つの方法は、body タグを閉じる直前にスクリプトを挿入することです。

于 2013-10-04T14:05:42.437 に答える
1

ready()の正しい使い方:

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


jsフィドル

于 2013-10-04T14:14:40.320 に答える
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 に答える