我有两个用于选项卡和子选项卡的ASP.NET 4.0 菜单控件和一个用于页面左侧导航的树控件。
我正在使用选定的 CSS 类来确保选定的选项卡/子选项卡/导航是不同的颜色。
每当我选择这些控件的项目之一时,选择的 CSS 应用在它上面但父选择状态丢失。
在查看子页面时,如何确保顶级菜单项具有选定的 CSS 类?
主菜单:
<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;
}