突出显示ASP.Net菜单中选定的选项卡
突出显示ASP.Net菜单中选定的选项卡
提问于 2013-02-06 20:29:27
我试图用不同的颜色高亮ASP.NET菜单中选定的选项卡。这样做似乎很简单，但首先我无法成功，其次，到目前为止，我还没有找到一个很好的工作范例。
ASP/
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/ReadMe.aspx" Text="Read Me" />
<asp:MenuItem NavigateUrl="~/Summary.aspx" Text="Summary" />
<asp:MenuItem NavigateUrl="~/Detail.aspx" Text="Detail" />
</Items>
</asp:Menu>
</div>CSS
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-12 00:13:20
这个答案 to ASP.NET:突出显示当前页面的菜单项应该提供您想要的解决方案。
基本上，您需要使用Menu.StaticSelectedStyle性质。在上面的答案链接和文档中有一个例子。
示例片段
<asp:menu [...]>
<staticselectedstyle backcolor="LightBlue"
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>
[...]
</asp:menu>此外，您还需要删除menu IncludeStyleBlock="false"，因为它“指示ASP.NET是否应该为菜单中使用的样式呈现一个级联样式表(CSS)定义块”。
其他有用的链接：
Stack Overflow用户
发布于 2013-02-12 10:16:21
--这是一个可行的解决方案： *Script*
<script language="javascript" type="text/javascript">
$(function () {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$("#cssmenu a").each(function () {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
$("#header a").each(function () {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
</script>标记
使用div id ="cssmenu" 列表项
<div id='cssmenu'>
<ul>
<li><a href="../Admin/dashboard.aspx"><span>Dashboard</span></a></li>
<li><a href="../Admin/Report.aspx"><span>Reports</span></a></li>
<li><a href="../Admin/Shop.aspx"><span>Shop</span></a></li>
<li><a href="../Admin/system.aspx"><span>System</span></a></li>
</ul>
</div>StyleSheet
#cssmenu ul {
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 33px;
font-size: .6em;
background: url(images/bg.png) repeat-x top left;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: 1px solid #000;
margin: 0;
padding: 0;
}
#cssmenu li {
display: block;
float: left;
margin: 0;
padding: 0;
}
#cssmenu li a {
float: left;
color: #A79787;
text-decoration: none;
height: 24px;
padding: 9px 15px 0;
font-weight: normal;
}
#cssmenu li a:hover,
#cssmenu .active {
color: #fff;
background: url(images/bg.png) repeat-x top left;
text-decoration: none;
}
#cssmenu .active a {
color: #fff;
font-weight: 700;
}
#cssmenu ul { background-color: #629600 }
#cssmenu li a:hover,
#cssmenu li.active { background-color: #7AB900 }Stack Overflow用户
发布于 2013-02-12 02:02:17
您需要手动设置选定的MenuItem
NavigationMenu.Items(i).Selected = True我创建了一个函数来使突出显示更容易。
SelectMenuByValue("Value2", NavigationMenu)它以MenuItem和菜单控件实例的值作为参数。
<asp:Menu ID="NavigationMenu" runat="server">
<Items>
<asp:MenuItem Text="Parent1" Value="ParentValue">
<asp:MenuItem Text="SubMenu1" Value="Value1" NavigateUrl="~/Page1.aspx" />
<asp:MenuItem Text="SubMenu2" Value="Value2" NavigateUrl="~/Page2.aspx" />
<asp:MenuItem Text="SubMenu3" Value="Value3" NavigateUrl="~/Page3.aspx" />
</asp:MenuItem>
</Items>代码背后：
Public Sub SelectMenuByValue(ByVal sValue As String, ByVal NavigationMenu As Menu)
Dim iMenuCount As Integer = NavigationMenu.Items.Count - 1
For i As Integer = 0 To iMenuCount
Dim menuItem As MenuItem = NavigationMenu.Items(i)
If menuItem.Value = sValue Then
If menuItem.Enabled AndAlso menuItem.Selectable Then menuItem.Selected = True
Exit For
End If
If CheckSelectSubMenu(menuItem, sValue) Then Exit For
Next
End Sub
Private Function CheckSelectSubMenu(ByVal menuItem As MenuItem, ByVal sValue As String) As Boolean
CheckSelectSubMenu = False
Dim iMenuCount As Integer = menuItem.ChildItems.Count - 1
For i As Integer = 0 To iMenuCount
Dim subMenuItem As MenuItem = menuItem.ChildItems(i)
If subMenuItem.Value = sValue Then
CheckSelectSubMenu = True
If subMenuItem.Enabled AndAlso subMenuItem.Selectable Then subMenuItem.Selected = True
Exit For
End If
If CheckSelectSubMenu(subMenuItem, sValue) Then
CheckSelectSubMenu = True
Exit For
End If
Next
End Function参考:来自论坛 ASP.NET 4:突出显示当前页面的菜单项
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14738185
复制相关文章
相似问题
腾讯云开发者
