0

CSS ファイルで、リスト内のアンカー タグのテキストの色を既に BLACK に設定しています。リスト項目をアクティブとして宣言し、テキストの色を変更したいのですが、うまくいきません。助けてください！

プリセットの色は次のとおりです。

#already-set li a
{
    font: normal 14px Arial;
    border-top: 1px solid #ccc;
    display: block;

    color: black;

    text-decoration: none;
    line-height:26px;
    padding-left:5px;            
}

アクティブなリスト項目の色を変更するコードは次のとおりです。

a#active
{
    background-color: #d11250;

    color: white;

    font-weight:bold;   
}

そして、ここに私のHTMLがあります:

<ul id="already-set">                               
  <li><a href="#" id="active"> List Item </a></li>
</ul>
4

2 に答える 2

4

と混同していa:activeます。

もう少し明確になるこの例を確認してください。クリックしたときにその場でアクティブな要素を変更するために jQuery を追加しました。

$(function() {
  $("a").click(function() {
    // remove classes from all
    $("a").removeClass("active");
    // add class to the one we clicked
    $(this).addClass("active");
  });
});
#already-set li a {
  font: normal 14px Arial;
  border-top: 1px solid #ccc;
  display: block;
  color: black;
  text-decoration: none;
  line-height: 26px;
  padding-left: 5px;
}

a.active {
  background-color: #d11250;
  color: white;
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="already-set">
  <li><a href="#"> List Item 1</a>
  </li>
  <li><a href="#" class="active"> List Item 2</a>
  </li>
  <li><a href="#"> List Item 3</a>
  </li>
</ul>

リストの css のため、テキストの色は黒のままです。選択した要素のテキストの色を白に変更したい場合は、例 2のように次のように変更してください。

に変更a.activeし#already-set li a.activeます。

于 2013-08-29T05:16:43.560 に答える
1

これに変更a#activeするa:activeと、問題が解決します。

于 2013-08-29T05:15:01.957 に答える