HTMLナビゲーションバーの問題（アクティブ状態）

Question

ナビゲーションバーをアクティブ状態に設定する際に問題が発生しています。 aがアクティブなときに背景色を変更したい。

nav { 
 
    font-size: 30px; 
 
    color: #ffffff; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
nav li a { 
 
    display: block; 
 
    padding-top: 38.5px; 
 
    padding-bottom: 38.5px; 
 
    padding-left: 21px; 
 
    padding-right: 21px; 
 
    background-color: #000000; 
 
    text-decoration: none; 
 
    color: #3a9eb2; 
 
    font-size: 20px; 
 
} 
 
nav li a:hover { 
 
    background-color: #3a9eb2; 
 
    opacity: 0.7; 
 
    color: #000000; 
 
} 
 
/* problem*/ 
 

 
nav li a:active { 
 
    background-color: #ffffff; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">HOME</a> 
 
    </li> 
 
    <li><a href="#">RT SERIES</a> 
 
    </li> 
 
    <li><a href="#">ATV NR6</a> 
 
    </li> 
 
    <li><a href="#">ABOUT US</a> 
 
    </li> 
 
    </ul> 
 
</nav>

しかし、私は、Webページではないアクティブリンクを実行したときに色を変更していない、いずれかの助け

Answer 1

ことができます：私は以下のコードを追加しました

実際に要素をクリックすると、:active要素の状態が適用されます。この場合、コードは正常に動作します。 :active on MDNに関するさらに詳しい情報

現在のページとしてアクティブな場合は、JavascriptまたはPHPを使用して追加のクラスを適用する必要があります。

nav { 
 
    font-size: 30px; 
 
    color: #ffffff; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
nav li a { 
 
    display: block; 
 
    padding-top: 38.5px; 
 
    padding-bottom: 38.5px; 
 
    padding-left: 21px; 
 
    padding-right: 21px; 
 
    background-color: #000000; 
 
    text-decoration: none; 
 
    color: #3a9eb2; 
 
    font-size: 20px; 
 
} 
 
nav li a:hover { 
 
    background-color: #3a9eb2; 
 
    opacity: 0.7; 
 
    color: #000000; 
 
} 
 

 
/* problem*/ 
 
nav li a:active { 
 
    background-color: #ffffff; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="index.htm">HOME</a> 
 
    </li> 
 
    <li><a href="#">RT SERIES</a> 
 
    </li> 
 
    <li><a href="#">ATV NR6</a> 
 
    </li> 
 
    <li><a href="#">ABOUT US</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

a:active新しいページが呼び出されながら、新しいページのロードが開始されるまで、あなたがリンクをクリックした瞬間から、すなわち、状態を意味します。通常これは非常に短く、その状態をほとんど見ることはありません。

「アクティブリンク」は、多くの場合、意味：JavaScriptで「アクティブ」のようなクラスが割り当てられます、現在のページのメニューエントリ/リンクを、それが<a href="pages/start.php" class="active">Start</a>

プラスになりますので：あなたのケースでは、すべてのリンクを除きます最初の1つはローカルアンカー/ IDに同じページ上にあるので、前述の単純なjavascriptはこの場合は機能しません。

これはあなたの問題に対する解決策ではありませんが、あなたが恥知らずに期待しているように動作しない理由に対する答えです。