ハイライトされたメニューリンク

Question

私のホームページには複数のセクションがあります。私が特定のセクションにいるときは、そのセクションをメニューで強調表示します。

私が使っているテーマはli：currentですが、このコードは常に同じことをするわけではありません。

5つのメニューリンクのうち2つでクリックしたり、セクションが橙色になり、オレンジ色になったりするとスクロールして表示されます。

クリックすると他の3つのメニューリンクがオレンジになり、ページがセクションにスクロールすると、メニューリンクのオレンジ色が消えます。

これらの3つのセクションのうちの1つにスクロールすると、メニューリンクの色がまったく変わらない。

セクションはセクションタグで作成され、セクションリンクにはメニューリンクが設定されています。

どうすればこの問題を解決できますか？

あなたは CSS3の擬似セレクタこのためを使用することができます

<section id="portfoliosection"> 
    <div class="portfolio" id="portfolio" role="region" aria-label="Portfolio"> 
    </div> 
    <div id="portfolioh2"> 
     <h2 class="h2portfolio">Portfolio</h2> 
    </div> 
    <div id="portfolio1"> 

     <?php wd_slider(2); ?> 
    </div> 

    <div id="portfoliotekst"> 
     <p class="portfoliotekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ex finibus, pellentesque urna eu, mattis ipsum. Aenean metus elit, cursus at pharetra vehicula, maximus ut ligula. Fusce lobortis lorem in dolor dapibus elementum. Suspendisse 
      ultrices ipsum lectus. Nullam lorem sapien, molestie sit amet elit ultricies, varius gravida erat. Cras ullamcorper, augue suscipit faucibus accumsan, ante nibh viverra dui, ac molestie velit arcu at metus. Duis finibus molestie velit, a efficitur 
      ex finibus luctus. In justo dui, hendrerit sed quam ac, iaculis rhoncus orci. Sed cursus, mauris vel laoreet consectetur, massa tortor iaculis nisl, eget mollis nisl nunc nec metus. Phasellus eleifend elit et metus laoreet, vel bibendum arcu 
      ultrices. Vivamus id augue sit amet dui lobortis posuere. Nunc accumsan ante nec mauris tincidunt, in porta tortor aliquet. Etiam posuere eget lorem ut commodo.</p> 
    </div> 
</section> 

#portfolio { 
    width: 100%; 
    height: 5px; 
} 

.h2portfolio { 
    background-color: white; 
    text-align: center; 
    color: #F16C20; 
    margin-top: 5%; 
} 

#portfolio1 { 
    width: 100%; 
    text-align: center; 
    display: block; 
} 

#portfoliotekst { 
    width: 100%; 
    text-align: center; 
} 

.portfoliotekst { 
    margin-top: 4%; 
    margin-left: 20%; 
    margin-right: 20%; 
} 

Answer 1

。

a:hover 
a:visited 
a:active 

- OR -

新しいクラスは、それをクリックしたときに "を選択した" と、あなたのCSSファイルに ".selected" を定義するそれらを与えることができます。

.selected{ 
    color : red; 
}