主動導航欄菜單項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

回答

相關問題