单击太阳菜单时，如何确保顶级菜单项具有选定的 CSS 类？答案

【问题标题】：How can I ensure that the top level menu item has a CSS class of selected while clicking sun-menu?单击太阳菜单时，如何确保顶级菜单项具有选定的 CSS 类？
【发布时间】：2012-06-16 02:26:48
【问题描述】：

我有两个 ASP.NET 4.0 菜单控件用于页面上的选项卡和子选项卡和 一个用于左侧导航的树形控件 .

我正在使用选定的 CSS 类来确保选定的标签/子标签/导航是不同的颜色。

每当我选择这些控件的一项时，选择的 CSS 应用在它上面，但父选择状态丢失。

如何确保在查看子页面时，顶级菜单项的 CSS 类为 selected？

主菜单：

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />

<asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" 
MaximumDynamicDisplayLevels="0" RenderingMode="Table"
DataSourceID="SiteMapDataSource1"
ViewStateMode="Enabled">
<StaticMenuStyle CssClass="menu"/>
<StaticMenuItemStyle CssClass="menuItem"/>
<StaticSelectedStyle CssClass="menuSelectedItem"/>
</asp:Menu>

子菜单：

<asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false"     StartingNodeOffset="1"/>

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
MaximumDynamicDisplayLevels="0" RenderingMode="Table"
DataSourceID="SiteMapDataSource2"
ViewStateMode="Enabled">
<StaticMenuStyle CssClass="menu"/>
<StaticMenuItemStyle CssClass="menuItem"/>
<StaticSelectedStyle CssClass="menuSelectedItem"/>
</asp:Menu>

左侧导航：

<asp:SiteMapDataSource ID="SiteMapDataSource3" runat="server" ShowStartingNode="false" 
StartingNodeOffset="2" />

<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource3" 
ExpandDepth="2" NodeIndent="0">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle ForeColor="#5555DD" />
<SelectedNodeStyle BackColor="GhostWhite"/>
<NodeStyle BackColor="LightSteelBlue"/>
</asp:TreeView>

CSS：

.menu
{
  background-color: black;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
}
.menuItem td
{
  height: 24px;
  width: 120px; 
  background: url(Images/unselectedTab.jpg) no-repeat;
  text-align: center;
  vertical-align: middle;
}

.menuSelectedItem td
{
 height: 24px;
 width: 120px;
 background: url(Images/selectedTab.jpg) no-repeat;
 text-align:center;
 vertical-align:middle;  
}

【问题讨论】：

我认为没有人会读那么多代码

标签： asp.net css menu tabs

【解决方案1】：

没有阅读您的代码，但根据我的说法，如果您想保留所选的父菜单项，那么您必须检查您的代码，以确保它没有被删除。在您的脚本中可能有一些代码，例如 -

$(this).parent().removeClass("selected");

如果存在，请评论此行并检查它是否有效。如果没有这样的事情，那么你将不得不申请如下课程 -

$(this).parent().addClass("selected");

以上两行代码，您都会在点击菜单时调用的函数内部找到。

【讨论】：