-1

この質問は他の投稿で既に回答されているJQueryことは知っていますが<li>、リンク<a>がクリックされた場合にタグのクラスを変更するにはどうすればよいですか?

<li class="link" id="home" >
   <a href="admin?main=home">Home</a>
</li>
<li class="link" id="flt" >
   <a href="admin?main=flt">FLT</a>
</li>

これは私がこれまでに試したことです：

$('li').click(function() {
    $("li.active").removeClass("active");
    $(this).addClass('active');
});

答えを説明してください、私のものに似た他の投稿にはそれほど詳細がないので、彼らがどのようにそれを行うのか本当に理解できませんか?

4

3 に答える 3

2

要素をクリックすると、実際のクリック ターゲットは、aデフォルト アクションがhrefプロパティで指定されたリソースに移動する要素です。

この場合、liイベントにクリック イベントを登録しています。このハンドラーは、子孫要素で発生したイベントがドキュメント ルートにバブルされるイベント バブリングのためにトリガーされます。

したがって、ここでの解決策は、イベントで.preventDefault()を呼び出して、クリック イベントのデフォルト アクション (この場合はa要素のナビゲーション) を防止することです。

var $lis = $('li').click(function(e) {
    $lis.filter(".active").removeClass("active");
    $(this).addClass('active');
    e.preventDefault()
});
于 2013-09-18T12:36:36.940 に答える
1

次のスクリプトを使用します。http://jsfiddle.net/czG8h/

$('.link a').click(function() {
    $("li.active").removeClass("active");
    $(this).closest('li').addClass('active');
});

ページ全体でアクティブなスタイルを維持したい場合は、次のコードでうまくいきます。

 $(document).ready(function() {
        var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");

        ///// Apply active class to selected page link
        $('.link a').each(function () {

            if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
                $(this).closest('li').addClass('active');
        });

    });
于 2013-09-18T12:36:14.937 に答える
0

.closest を使用して親の li にアクセスし、アクティブなクラスを追加してから、兄弟を使用して他の li を見つけ、アクティブなクラスを削除し、e.preventDefault() を使用してページの変更を防ぎます。

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

デモ

于 2013-09-18T12:37:13.470 に答える