1

タブとサブタブ用の2 つの ASP.NET 4.0 メニュー コントロールと、ページの左側のナビゲーション用の 1 つのツリー コントロールがあります。

選択した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;  
}
4

1 に答える 1

0

コードを読みませんでしたが、選択した親メニュー項目を保持したい場合は、コードが削除されていないことを確認する必要があります。スクリプトには、次のようなコードが含まれている場合があります-

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

この行が存在する場合はコメントし、機能するかどうかを確認します。そのようなものがない場合は、以下のようにクラスを適用する必要があります-

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

上記の両方のコード行は、メニューをクリックすると呼び出される関数の中にあります。

于 2012-06-13T07:13:39.320 に答える