Выделить активные пункты меню на главной странице

Question

Я использую мастер для своих пунктов меню. Поскольку я использую главную страницу, я смущен, как выделить активный пункт меню. Может кто-нибудь мне помочь. Поскольку у меня есть 4 страницы, я попробовал этот ниже код во всех событиях загрузки страницы на 4 страницах и не работал.

if (!IsPostBack) 
     { 
      Menu M = (Menu)this.Master.FindControl("menu"); 
      foreach (MenuItem item in M.Items) 
      { 
       if (item.Text == "update") 
       { 
        item.Selected = true; 
       } 
      } 
     } 

<div id="menu"> 
       <ul> 
        <li> 
         <asp:LinkButton ID="update" runat="server" OnClick="update_Click">Update</asp:LinkButton></li> 
        <li> 
         <asp:LinkButton ID="bulk" runat="server" OnClick="bulkupdate_Click">Bulk</asp:LinkButton></li> 
        <li> 
         <asp:LinkButton ID="profiles" runat="server" OnClick="userprofiles_Click">Profiles</asp:LinkButton></li> 
        <li> 
         <asp:LinkButton ID="help" runat="server" OnClick="help_Click">Help</asp:LinkButton></li> 
       </ul> 
      </div> 

#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%; 
} 

Answer 1

На основании вашей страницы, вы можете установить активный элемент с помощью Jquery в документе. Не хорошая практика, хотя .. это может потребовать изменения кода, если пункты меню увеличиваются.

Answer 2

Использование CSS для активного меню как

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

Answer 3

использования меню управления asp.net, как показано ниже ...

<asp:Menu Width="100%" ItemWrap="true" ID="SelectMenu" runat="server"    DynamicHorizontalOffset="2" 
        StaticSubMenuIndent="10px" CssClass="menubar" Orientation="Horizontal"> 
        <DynamicHoverStyle CssClass="menuitem-hover" /> 
        <DynamicMenuItemStyle HorizontalPadding="2px" CssClass="menuitem" /> 
        <DynamicMenuStyle BackColor="#F7F6F3" CssClass="IE8Fix" /> 
        <DynamicSelectedStyle CssClass="menuitemsel" /> 
        <StaticHoverStyle ForeColor="Yellow" /> 
        <StaticMenuItemStyle HorizontalPadding="15px" VerticalPadding="0px" CssClass="menu" /> 
        <StaticSelectedStyle CssClass="menuitemselstatic" /> 
        <Items> 
</items> 
</asp:Menu> 

Answer 4

@ user3003821 - проверить это Грязные, но работает

MasterPage HTML:

<div id="MenuHolderDiv"> 
       <ul> 
        <li class="menuLst"><a href="#" id="MenuItem1" onclick="redirectOnClick(this)">MenuItem1</a></li> 

        <li class="menuLst"><a href="#" id="MenuItem2" onclick="redirectOnClick(this)">MenuItem2</a></li> 

        <li class="menuLst"><a href="#" id="MenuItem3" onclick="redirectOnClick(this)">MenuItem3</a></li> 

        <li class="menuLst"><a href="#" id="MenuItem4" onclick="redirectOnClick(this)">MenuItem4</a></li> 

       </ul> 
      </div> 

    </div> 

Master Page: Сценарий:

<script type="text/javascript"> 
     $(document).ready(function() { 
      var pageName = getPageName(window.location.href); 
      $("#" + pageName).addClass("active"); 
      $("#" + pageName).parent().addClass("activeLst"); 
     }); 
     function getPageName(url) { 
      var index = url.lastIndexOf("/") + 1; 
      var filenameWithExtension = url.substr(index); 
      var filename = filenameWithExtension.split(".")[0]; 
      return filename;          
     } 
     function redirectOnClick(item) { 
      debugger; 
      window.location.href = $(item).text() + ".aspx"; 
     } 
    </script> 

StyleSheet:

.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 и идентификатор, используемый для пункта меню должно быть таким же

Answer 5

Работа с 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"); 
     }); 
    })