突出显示母版页中的活动菜单项

我正在使用我的菜单项的主人。 由于我使用母版页,我很困惑如何突出显示活动菜单项。 谁能帮我吗。 由于我有4个页面,我在4页的所有页面加载事件中尝试了以下代码并且无法正常工作。

if (!IsPostBack) { Menu M = (Menu)this.Master.FindControl("menu"); foreach (MenuItem item in M.Items) { if (item.Text == "update") { item.Selected = true; } } }  #menu ul { margin: 0; padding: 7px 6px 0; background: #b6b6b6 url('/Images/Overlay.png') repeat-x 0 -110px; line-height: 100%; border-radius: 1em; font: normal 0.5333333333333333em Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); width 100%; } #menu li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } #menu a, #menu a:link { font-weight: bold; font-size: 16px; color: #444444; text-decoration: none; display: block; padding: 8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } #menu a:hover { background: #000; color: #fff; } #menu .active a, #menu li:hover > a { background: #bdbdbd url('/Images/Overlay.png') repeat-x 0 -40px; background: #666666 url('/Images/Overlay.png') repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 0 #ffffff; } #menu ul ul li:hover a, #menu li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } #menu ul ul a:hover { background: #7d7d7d url('/Images/Overlay.png') repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } #menu li:hover > ul { display: block; } #menu ul ul { display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: url('/Images/Overlay.png') repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } #menu ul ul li { float: none; margin: 0; padding: 3px; } #menu ul ul a, #menu ul ul a:link { font-weight: normal; font-size: 12px; } #menu ul:after { content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } * html #menu ul { height: 1%; } 

根据您所在的页面,您无法在document.ready中使用Jquery设置活动项目? 虽然不是很好的做法..如果菜单项增加,这可能需要更改代码。

使用CSS作为活动菜单

 active{ background-color: #CDE3F7; border-radius: 5px; color: #000000; text-decoration: none; } 

@ user3003821 – 看看Dirty,但有效

MasterPage HTML:

    

母版页:脚本:

   

样式表:

 .menuLst { float:left; display:inline; background-color:Gray; padding:2x; } .menuLst a { color:Black; text-decoration:none; } .menuLst a:hover { color:white; text-decoration:none; } .menuLst a:active { color:Green; text-decoration:none; } .menuLst:hover { background-color:Black; text-decoration:none; } .active { color:Green !important; text-decoration:none; } .activeLst { background-color:Black; } 

条件 :用于菜单项的PageName和ID必须相同

使用下面的asp.net菜单控件…

            

使用Bootstrap和jQuery

 $(function () { $(".navbar‐btn a").each(function () { if (this.href.trim().split("/").splice(3, 4)[0] == window.location.pathname.split("/").splice(1, 1)[0]) $(this).parent().addClass("active"); }); })