1

私は JQuery の初心者で、addClass() について質問があります。これを機能させるためにしばらく時間を費やしましたが、何か間違ったことをしたようです。HTMLとブートストラップでトップメニューを作成しました。訪問者は最初に index.php にアクセスすると想定しているので、index.php に class="active" を作成しました。次に、トップ メニューの他のリンク (例: About Us) をクリックすると、class="active" が index.php の "li" タブに追加され、class="active" が削除されます。

以下は私のHTMLコードです：

<div class="nav-collapse collapse">  
    <ul class="nav pull-right">
        <li id="home" class="active"><a href="index.php"> Home</a></li>
        <li id="about"><a href="about_us.php"> About Us</a></li>
        <li id="browse"><a href="browse.php"> Browse</a></li>
        <li id="contact"><a href="contact.php"> Contact</a></li>
    </ul> 
</div>

以下は、私が使用してこれを実現しようとする JQuery コードです。

$(function (){              
   var sidebar = $('.nav');
sidebar.delegate("li", "click", function(){ 
    if($(this).hasClass('active')){ 
    //If click on the tab that is currently active, it will do nothing.  
    }else{      
            sidebar.find('.active').addClass('inactive'); 
            sidebar.find('.active').removeClass('active');   
            $(this).removeClass('inactive');            
            $(this).addClass('active'); 
         }
     });
});

ローカルサーバーでテストしました。トップメニューのタブをクリックするとグレーに変わりましたが、そのままではありませんでした。だから私は何か間違ったことをしたと確信していますが、どこにあるのかわかりません。私は JQuery の初心者なので、皆さんから学べることを願っています。ありがとう！

4

3 に答える 3

2

リンクをクリックすると、ブラウザがまったく新しいページに移動し、まったく新しい JavaScript 環境が開始されます。現在のページに対して行ったことは、新しくロードされたページに引き継がれます。

したがって、アクティブなクラスは現在のページで変更される可能性がありますが、最初のページから何も継承しないまったく新しいページがロードされます (たとえば、最初からやり直します)。新しいページが読み込まれると、最初のページのコードは使用できなくなります。

アクティブなクラスを各個別のページにコード化するだけで (各ページはそれがどのページであるかを認識しているため)、URL に基づいてページが読み込まれるときにアクティブなクラスを設定する JS の共通セットを 1 つ用意する必要があります。ページの読み込み。

また、おそらく非アクティブなクラスは必要ありません。デフォルトの CSS 状態は非アクティブな外観を表すことができ、アクティブなクラスは CSS オーバーライドを適用してアクティブな状態を表示できます。

于 2013-10-13T01:59:07.680 に答える
0

誰かが別のリンクをクリックすると、別のページにリダイレクトされるため、これは機能しません。ただし、ヘッダーは、どのリンクがクリックされたのか、どのページにあるのかを実際には認識していません。あなたがどのページであるかをヘッダーに知らせる必要があります。これは理にかなっていますか？

于 2013-10-13T02:02:17.383 に答える