回发后保持所选菜单处于活动状态

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'); 
}