

サイトのナビゲーションなどによくある、選択されているページの文字色を変えたいのですが、  
どのようにすれば良いのでしょうか？  
例えば以下の場合、会社案内をクリックしたら、会社案内ページが表示されているときは`<li><a
href="#">会社案内</a></li>`のテキストをredにする。といった動きにしたいです。

[code]

    <ul class="nav">
      <li><a href="#">会社案内</a></li>
      <li><a href="#">製品一覧</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
    
[/code]


CC BY-SA 3.0
2017-04-03T10:19:58.997
33744
2019-06-11T01:10:14.147
12323
question
javascript html jquery css
サイトのナビゲーションの、選択されているテキストに色を付けたいです。


ページの読み込まれ方もあると思いますがajaxなどで必要な時に部分的に読み込んでいる場合  
以下のようにクリックをもとに切り替える方法もあれば

[code]

    // .active 表示中のページのボタンを表すクラス
    $('.nav li').on('click', function() {
      $('.active').removeClass('active');
      $(this).addClass('active');
    });
    
[/code]

取ってきたページに依存して（ファイル名やファイル内の情報など）取ってきた後でどの要素にクラスをつけるのかを選ぶ方法があります。

前者は手軽ですが後者だといろいろなページの切り替わり方、同じページでも色々なボタンがあったり条件を満たしたら切り替わったり……に対応し易いです。

また単純にhtmlファイルが少なくてまとめて読み込むのでしたらそれぞれのファイルごとにactiveなどのクラスを付けてそれで色を付ければいいとおもいます。


CC BY-SA 3.0
2017-04-03T14:56:22.657
33753
2017-04-03T14:56:22.657
14222
33744
answer