navbarのクリックカラーの変更html

Question

私は初めてのウェブサイトで問題にぶつかっています。私は正常に見えるし、私がそれを（カラースキーム以外の後に来ることができます）にしたいどのように動作する上にナビゲーションバーを正常に作成しました。問題は、バー上の別のリンクをクリックするたびにそのボックスの色を変更したいが、現在はホームページにハイライト表示されているということです。私はこれは非常にシンプルなものだと思うが、私はそれを見つけることができない。お手伝いありがとう。これに

a.active 
    background-color: #EAB126 
} 

：この

body 
 
{ 
 
    font-family:sans-serif; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 

 
/* upper strip holding the tabs*/ 
 
ul 
 
{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    position:fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    background-color: #328CC1 
 
} 
 

 
li 
 
{ 
 
    float:left; 
 
    border-right:3px solid #30FFE3; 
 
} 
 

 

 
li a 
 
{ 
 
    display: block; 
 
    color: whitesmoke; 
 
    text-decoration: none; 
 
    padding: 14px 16px; 
 
    text-align: center; 
 

 
} 
 

 
li a:hover:not(.active) 
 
{ 
 
    background-color: #111; 
 
} 
 

 
a.active 
 
{ 
 
    background-color: #EAB126 
 

 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#academics">Academics</a></li> 
 
    <li><a href="#athletics">Athletics</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
</ul>

Answer 1

変更

li a:focus { 
    background-color: #EAB126 
} 

Here is the JSFiddle demo

T彼はあなたの尋ねることを行いますが、これがナビゲーションバーの場合は、ページを変更するとすぐにコントロールがフォーカスを失うことを覚えておいてください。 Javascript/JQueryを使用する方がずっと簡単です。

Answer 2

これを処理する一般的な方法は、各ページにページ名を含むクラス、たとえば<div class="academics">を含めることです。

 <ul> 
      <li><a class="for_home" href="#home">Home</a></li> 
      <li><a class="for_academics" href="#academics">Academics</a></li> 
      <li><a class="for_athletics" href="#athletics">Athletics</a></li> 
      <li><a class="forcontact" href="#contact">Contact</a></li> 
     </ul> 

次のようにこれは、CSSが続く：次のように

今（ページのdiv内）あなたのヘッダーを変更

.home .for_home, .academics .for_academics, .athletics .for_athletics, .contact .for_contact { 
    background-color: #EAB126; 
} 

次に、現在のページのメニュー項目がします強調表示されます。

あなたの最初のウェブサイトにおめでとうございます！