回發後保持所選菜單處於活動狀態

Question

即使回發後，如何讓所選菜單保持活動狀態？以下是我目前使用的編碼。

HTML

<div id="menu-promo"> 
    <ul> 
    <li><a href="#">menu1</a></li> 
    <li><a href="#">menu2</a></li> 
    <li><a href="#">menu3</a></li> 
    <li><a href="#">menu4</a></li> 
    </ul> 
</div> 

CSS

#menu-promo {background-color: #ff9100; display: inline-block; font-family: Calibri; width: 100%; padding: 45px 20px 20px 20px; border: 1px 0px 0px 0px solid #b3e5fc; font-weight: bold; color: #fff!important;} 
#menu-promo ul {margin: 0; padding: 0; text-align: center; display: block;} 
#menu-promo ul > li {list-style: none; display: inline-block;} 
#menu-promo ul > li a {color: #fff; border: 2px solid #ff9100; border-radius: 20px; padding: 10px 20px 10px 20px; text-decoration: none;} 
#menu-promo ul > li a:hover {background-color: #eeeeee; border: 2px solid #01579b; cursor: pointer; color: #01579b; text-decoration: none;} 
#menu-promo ul li a.active {background-color: #eeeeee; border: 2px solid #01579b; cursor: pointer; color: #01579b; text-decoration: none;} 

JS

$(function() { 
    var selector = '#menu-promo ul li a'; 

    $(selector).on('click', function() { 
     $(selector).removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

Answer 1

一種選擇是註冊一個啓動腳本每個page_load事件在您的代碼後面調用JavaScript函數。

此功能要求您爲每個菜單項設置ID並傳遞該ID，例如。 #menuItemID

function setActive(menuItemID){ 
    var selector = '#menu-promo ul li ' + menuItemID; 
    $(selector).addClass('active'); 
} 

C＃& VB.Net（可能是[GetType]()對VB）

ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:setActive(thisMenuItemID); ", true); 

如果你的菜單項文本正確匹配您的頁面名稱，你可以使用函數像

function setActive(){ 
    // Might need to play with substring parameters 
    var selector = '#menu-promo ul li a[name=' + location.pathname.substring(0, location.pathname.indexOf(".")) + ']'; 
    $(selector).addClass('active'); 
}