添加類活動菜單項

Question

如果用戶在FrontPage中添加類「主動」先立，如果畫廊頁面上添加類「主動」，以第二李等等...

<ul> 
<li class="home"><a href="/">Home</a></li> 
<li class="gallery"><a href="/gallery">Gallery</a></li> 
<li class="products"><a href="/products">Products</a></li> 
</ul> 

Answer 1

你可以有你的服務器端的檢測是「當前」頁面，並呈現「活躍」類向右li，OR，使用JavaScript來檢測這是當前頁面，並添加類

jQuery代碼：

$('.gallery').addClass('active'); // for the 'gallery' page 

Answer 2

你可以像下面這樣做來激活你的菜單。 （如果你確定不是低於特定網頁的網址內容的示例代碼可能對你有幫助）

<ul id="ulMenu"> 
    <li class="home"><a href="/">Home</a></li> 
    <li class="gallery"><a href="/gallery">Gallery</a></li> 
    <li class="products"><a href="/products">Products</a></li> 
</ul> 

嘗試以下功能母版頁和修改URL中包含函數值。

function MakeActiveMenu() 
{ 
    var currentURL = window.location.pathname; 
    var allMenu = $("#ulMenu").find('li'); 

    if(allMenu != null){ 
     $.each(allMenu, function(index,value){ 
      value.classList.remove('active'); 
     }); 
    } 

    if(currentURL != null){ 

     if(currentURL.toLowerCase().contains("Home")) { 
     $('.home').addClass('active'); 
     } 
     else if (currentURL.toLowerCase().contains("Gallery")){ 
     $('.gallery').addClass('active'); 
     } 
     else if (currentURL.toLowerCase().toLowerCase().contains("Products")){ 
     $('.products').addClass('active'); 
     } 
    } 
}