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类添加到{ {1}}，而不是<li/>标记。

Active Nav Bar菜单项CSS3 / HTML5

1 个答案: