CSSとJqueryを使用してアクティブなリンクの色を変更するには

Question

このコードをこのフィドルで使用しようとしましたhttp://jsfiddle.net/TheNix/sR3Ub/6/さらには でも、xampでうまく動作しません。それ以外のものはすべて動作していますが、連絡先をクリックすると1秒間アクティブになり、faqが再びアクティブになります。私がどこに間違っているのかを教えてください。 また、リンクをアクティブにすることとは別の場所をユーザーに伝える別の方法がありますか？

あなたはliないli aへとLiをクリックする上でアクティブなクラスを適用する必要がMY .PHTMLファイル

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div class="list-wrapper "> 

    <li class="list-header"> 
     <a href="#a" class="active"> 
     faqs 
     </a> 
    </li> 

    <li class="list-header"> 
     <a href="#b" > 
      contact us 
     </a> 
    </li> 

    <li class="list-header"> 
     <a href="#c"> 
      about us 
     </a> 
    </li> 
</div> 

    <script> 
     $('a').on('click', function(){ 
     $('div.list-wrapper').find('a.active').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
    </script> 

MY .cssファイル

    .list-wrapper { list-style: none;} 
     .list-wrapper li { padding-left: 1em; text-indent: -.7em;} 
     .list-wrapper li:before { 
      content: "• "; 
      color: #C0C0C0; /* or whatever color you prefer */ 
     } 

     .list-wrapper a:link, 
     .list-wrapper a:visited { color: #C0C0C0; text-decoration: none; } 
     .list-wrapper a:hover { color: #58595B; text-decoration: none; } 
     .list-wrapper a.active, 
     .list-wrapper a:active { color: #E6BD13; text-decoration: none; } 

Answer 1

が - からアクティブなクラスをクリアすべてのliをクリックし、クリックしたliに適用します。

CSSは、アクティブクラスを設定するのではなく、li.active内のaの色を変更することに基づいています。

また、リストスタイルを指定する理由はわかりません：1つのCSSルールではなし - リストの箇条書きを別のものに指定する場合のみ。

$(document).ready(function(){ 
 
    $('.list-wrapper li').on('click', function(){ 
 
    $('.list-wrapper li').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }) 
 
});

.list-wrapper { list-style: none;} 
 
.list-wrapper li { padding-left: 1em; text-indent: -.7em;} 
 
.list-wrapper li:before { 
 
    content: "• "; 
 
    color: #C0C0C0; /* or whatever color you prefer */ 
 
} 
 

 
.list-wrapper a:link, 
 
.list-wrapper a:visited { color: #C0C0C0; text-decoration: none; } 
 
.list-wrapper a:hover { color: #58595B; text-decoration: none; } 
 

 
.list-wrapper li.active a{ color: #E6BD13; text-decoration: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="list-wrapper "> 
 
    <li class="list-header active"> 
 
     <a href="#a"> 
 
     faqs 
 
     </a> 
 
    </li> 
 
    <li class="list-header"> 
 
     <a href="#b" > 
 
      contact us 
 
     </a> 
 
    </li> 
 
    <li class="list-header"> 
 
     <a href="#c"> 
 
      about us 
 
     </a> 
 
    </li> 
 
</div>