1

3つのアイテムのリストがあり、それにcssクラスを追加するためにjQueryクリックイベントを作成しました。しかし、アイテムの1つをクリックすると、クラス属性が設定されますが、直後に消えます。

なぜ何かアイデアはありますか？

コード：

<ul>
    <li><a id="home" href="home.php">Home</a></li>
    <li><a id="apps" href="apps.php">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

$(document).ready(function() {
    $('#home').click(function (){
        $(this).addClass('btnActive');
    });
});
4

4 に答える 4

8

更新された回答：

リンクをたどると、ページのDOM全体が破棄されて破棄され、新しいページのHTMLを読み取って作成されたDOMに置き換えられます。したがって、古いDOMに加えた変更は保持されません。ページの読み込み時に「btnActive」クラスをリンク上に配置する場合は、それに応じて、、、およびページのHTMLを変更する必要がhome.phpありapps.phpますsupport.php。

例home.php：

<ul>
    <li><a id="home" href="home.php" class="btnActive">Home</a></li>
    <li><a id="apps" href="apps.php">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

...しかしapps.php：

<ul>
    <li><a id="home" href="home.php">Home</a></li>
    <li><a id="apps" href="apps.php" class="btnActive">Apps</a></li>
    <li><a id="support" href="support.php">Support</a></li>
</ul>

または、ページの読み込み時にJavaScriptを使用して、に基づいてクラスを追加することもできますがlocation.href、実際にはHTMLを変更することをお勧めします。ただし、完全を期すために、リンクのとページの名前に同じ値を使用するため、次idのようにすることができます。

$(document).ready(function() {
    var id = location.href.replace(/.*\/([\w]+)\.php$/, '$1');
    if (id) {
        $("#" + id).addClass("btnActive");
    }
});

これにより、ページの名前がURLから分離され（ページにつながるパスは無視さ.phpれ、最後のパスが削除されます）、それがとして使用されid、クラスが追加されます。繰り返しになりますが、お勧めしませんが、引用したURLを使用すれば、機能するはずです。

次の元の答えは、私が気付く前からのものでした（Roryのおかげで）あなたはおそらく本当にリンクをたどる必要があるでしょう。

元の回答：

リンクをたどらないようにブラウザに指示することは決してないため、ページがリロードされます。

return false;イベントハンドラーを実行することで修正できます。

$(document).ready(function() {
    $('#home').click(function (){
        $(this).addClass('btnActive');
        return false;  // <=== The new bit
    });
});

...またはevent引数を受け入れてpreventDefaultそれを呼び出す：

$(document).ready(function() {
    // Accept the arg ---------v
    $('#home').click(function (event){
        // call the preventDefault
        event.preventDefault();
        $(this).addClass('btnActive');
    });
});

return falsejQueryイベントハンドラーでは、次の2つのことを行います。

  1. デフォルトのアクションを防止します（この場合、リンクをたどります）。

  2. 祖先要素に伝播するイベントを停止します。

preventDefault最初のものをするだけです。

于 2012-05-25T09:08:47.227 に答える
2

「home.php」をロードするためのリンクを防ぐ必要があります。

$(document).ready(function() {
    $('#home').click(function (e){
        e.preventDefault();
        $(this).addClass('btnActive');
    });
});
于 2012-05-25T09:09:08.383 に答える
1 
$(document).ready(function() {
    $('#home').click(function (e){
        e.preventDefault(); 
        e.stopPropagation();
        $(this).addClass('btnActive');
    });
});
于 2012-05-25T09:09:45.103 に答える
-1 
<!DOCTYPE html> 
<html> 
<head> 

  <script src="http://code.jquery.com/jquery-latest.js"></script> 
   <script>

                $(document).ready(function() {
                    $('#home li').click(function() {
                        $('#home li').removeClass();
                        $(this).addClass('btnActive');
                    });
                });
            </script>


</head> 
<body> 
<ul id="home">
    <li>Home</li>
    <li>Apps</li>
    <li>Support</li>

</ul>
</body> 
</html>
于 2012-05-25T09:25:45.770 に答える