0

私はjqueryに本当に慣れていませんが、Stackoverflowの貴重なユーザーによって作成された古い投稿を読んで、それを解決するために最善を尽くしました。私の問題は、クラスの onclick イベントを追加しようとすることです。ハイパーリンクリンクを空白（＃）に設定した場合にのみ機能します<a href="#">test</a>が、ハイパーリンクステータスに設定する<a href="product.php"と、しばらくの間クラスが削除および追加され、現在のページが開いた後、アクティブなクラスが自動的に削除され、以前のように設定されます. :(私のjsコード..

$('ul#menu li a').click(function() {
    $('ul#menu li a').removeClass('active');
    $(this).toggleClass('active');
});
4

4 に答える 4

3

あなたが直面している問題は、example.com/product.php がロードされた後、アクティブなクラスがそれぞれのアンカー タグに残っていないことです。これは、javascript がロード時に古いページの状態を新しいページに引き継がないためです。あなたは2つの方法でそれを行うことができます

  1. ページの読み込みを無効にして、同じページにとどまることができます。

    $('ul#menu li a').click(function(e) {
    e.preventDefault();//this will stop the current event which is your page load
    $('ul#menu li a.active').removeClass('active');//this will remove the active class from only a tag having active as class
    $(this).toggleClass('active');
});

  2. ページの読み込み後、現在のページを見つけて、それぞれのタグにアクティブなクラスを設定します

    (function($){
     //highlight the current tab
     var l = window.location.pathname,
     str = l.slice(l.lastIndexOf('/')+1,l.length);

    $('ul#menu li a.active').removeClass('active');//remove active from home page link
    $('#menu').find('a[href="'+str+'"]').addClass('active');
})(jQuery);
于 2012-09-24T13:22:14.563 に答える
2

これは私にとってはうまくいきます。

var url = window.location.href;
  url = url.substr(url.lastIndexOf("/") + 1);
  $("#menu").find("a[href='" + url + "']").addClass("active");

すべてのページにスクリプトを含めるだけでactive、現在の場所を反映するクラスが追加されます。何も切り替える必要はありません。

コードが機能しない理由を推測します。リンクをクリックすると、リンクが別のページにつながり、jQuery 関数が「リロード」され、何もクリックされないことを除いて、おそらくすべてが機能します。1 ページの Web サイトを実装しようとしている場合は、例を参照してください。

于 2012-09-24T13:18:33.447 に答える
0

以下を単独で使用してみて、$('ul#menu li a').removeClass('active');

$('ul#menu li a').click(function(){
    $(this).toggleClass('active');
});
于 2012-09-24T12:36:42.373 に答える
0

のみを使用する$(this).toggle('active')必要があります。前のステートメントは必要ありません。

于 2012-09-24T12:37:02.607 に答える