主动导航栏菜单项CSS3/HTML5

的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我甚至有一个元素项目：焦点，但它只适用于href =“＃”而不是我目前的设置。我在这里做错了什么？

来源

2012-03-13 lockdown

我认为你可能会寻找''='http://api.jquery.com/attribute-contains-word-选择器/。第一个是真正的“包含”。你使用的是关于包含单词并需要像空格那样的单词边界。从来没有使用过他们，所以我不确定，我自己。 – Basti 2012-03-13 19:49:49

得到了它的两个变化工作：

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

正如我在我的评论使用*=为“包含”建议，不~=（“包含文字”），我想你想添加active类别为<li/>，而不是<a/>标记。

来源

2012-03-13 20:04:18 Basti

主动导航栏菜单项CSS3/HTML5

回答

相关问题