主動導航欄菜單項CSS3 / HTML5

Question

我目前有這個：

jQuery的：

jQuery(document).ready( function(){
    var thispage = location.pathname.substring(1);
    //document.write(thispage);
    jQuery('#menu li a[href~="'+ thispage + '"]') // ~= is contains. Tweak as needed.
    .addClass('active');
});

CSS：

li.active {
    background-color: yellow;
}

HTML：

<nav id="topNav">
    <ul id="menu">
      <li><a href="<?=HOST?>/index.php" title="Home">HOME</a></li>
      <li><a href="<?=HOST?>/about-us/" title="About Us">ABOUT US</a></li>
      <li><a href="<?=HOST?>/technology/" title=" Technology"> TECHNOLOGY</a></li>
      <li><a href="<?=HOST?>/careers/" title="Careers">CAREERS</a>
      <li><a href="<?=HOST?>/blogs/" title="Blogs">BLOG</a>
        <!--<ul>                    
            <li style="background-color:#898486;"><a href="<?=SEEKER_HOST?>/opportunities" title="Current Opportunities">OPPORTUNITIES</a></li>
        </ul>-->
      <li class="last"><a href="<?=SEEKER_HOST?>/contact/index.php" title="Contact Us">CONTACT US</a></li>
    </ul>
</nav>

我的目標是使每個菜單項在頁面處於活動狀態時以不同的顏色顯示陰影。 我嘗試了多種方法來解決此問題，但無法使它正常工作。 在我的CSS中，我什至有一個用於：focus的元素項，但是它僅在href =“＃”時才有效，而在當前設置中不起作用。 我在這里做錯了什么？

Answer 1

可以進行以下兩項更改：

jQuery('#menu li a[href*="'+ thispage + '"]').parent().addClass('active');

正如我在評論中建議的那樣，將*=用作“包含”，而不是~= （“包含單詞”），並且我想您想將active類添加到<li/>而不是<a/>標記中。