アイテムメニューのハイライトを保持する方法

Question

アイテムのリストを持つナビゲーションバーがあります。

htmlコード

<div id="main-menu"> 
      <ul div="nav"> 
       <li><a href="about.html" target="_blank">ABOUT</a></li> 
       <li><a href="services.html" target="_blank">SERVICES</a></li> 
       <li><a href="portfolio.html" target="_blank">PORTFOLIO</a></li> 
       <li><a href="blog.html" target="_blank">BLOG</a></li> 
       <li><a href="contact.html" target="_blank">CONTACT</a></li> 
      </ul> 
    </div> 

IやったCSSコード、次の

CSSコード：

私は、メニューの項目の色を維持する必要が

a:link { 
    color: #000000; 
    text-decoration: none; 
} 

a:active { 
    color:#000000; 
    text-decoration: none; 
} 

a:visited { 
    color: #000000; 
    text-decoration: none; 
} 

a:hover { 
    color: #CE1F20; 
    text-decoration: none; 
} 

がために「＃のCE1F20私がページにいるのと同じように、たとえば、サービスページをクリックするとサービスページに移動しますが、サービスページの「＃CE1F20」の色を維持する必要があります。ブログに移動するとブログの色を " ＃CE1F20 "などとなります。

Answer 1

それはすべての静的なので、あなたがその色を持つクラスを作成し、各ページの適切なリンクをクラスを設定する必要があります。言い換えれば

、サービスページにナビゲーションバーが含まれます：

<li><a href="services.html" target="_blank" class="currentTab">SERVICES</a></li> 

Answer 2

PHPを使用している場合は、変数を使用してページがアクティブであることを示すことができます。ページがアクティブである場合

<div id="main-menu"> 
      <ul div="nav"> 
       <li><a <?php echo $isactive; ?> href="about.html" target="_blank">ABOUT</a></li> 
       <li><a <?php echo $isactive; ?> href="services.html" target="_blank">SERVICES</a></li> 
       <li><a <?php echo $isactive; ?> href="portfolio.html" target="_blank">PORTFOLIO</a></li> 
       <li><a <?php echo $isactive; ?> href="blog.html" target="_blank">BLOG</a></li> 
       <li><a <?php echo $isactive; ?> href="contact.html" target="_blank">CONTACT</a></li> 
      </ul> 

次に、あなたは "クラス= 'active_section'" のようなものを印刷して、あなたのCSSの可能性：あなたのページのそれぞれにおいて

.active_section { 
color: #CE1F20; 
text-decoration: none; 

}

Answer 3

、ANを追加します対応するメニュー項目に「アクティブ」クラス：

たとえば、about.htmlの場合、 'ABOUT'リンクに「アクティブ」クラスを追加します：

<div id="main-menu"> 
      <ul div="nav"> 
       <li><a class="active" href="about.html" target="_blank">ABOUT</a></li> 
       <li><a href="services.html" target="_blank">SERVICES</a></li> 
       <li><a href="portfolio.html" target="_blank">PORTFOLIO</a></li> 
       <li><a href="blog.html" target="_blank">BLOG</a></li> 
       <li><a href="contact.html" target="_blank">CONTACT</a></li> 
      </ul> 
    </div> 

次に、CSSで「アクティブ」のスタイルを定義します。

a.active{ 
    color: #CE1F20; 
} 

Answer 4

することは、このようなあなたのCSSを配置しようとすると：

{ // CSS }

この意志すべてのリンクに同じスタイルを適用し、アクティブな各リンクにCSSクラス「アクティブ」広告を追加してください。