StaticSelectedStyle-CssClass 不工作答案

【问题标题】：StaticSelectedStyle-CssClass Not WorkingStaticSelectedStyle-CssClass 不工作
【发布时间】：2011-03-08 22:10:21
【问题描述】：

我正在构建一个 ASP.NET 4.0 Web 应用程序，其中有一个菜单控件，如下所示：

   #menu {
        width: 940px;
        height: 36px;
        margin: 0 auto;
        padding: 0;
    }

    #menu ul {
        margin: 0px 0px 0px 10px;
        padding: 0;
        list-style: none;
        line-height: normal;
    }

    #menu li {
        float: left;
    }

    #menu a {
        display: block;
        height: 26px;
        margin-right: 2px;
        margin-bottom: 10px;
        padding: 10px 20px 0px 20px;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        color: #FFFFFF;
        border: none;
    }

    #menu a:hover, .selectedMenuItem {
        background: #FFFFFF;
        text-decoration: none;
        color: #333333;
    }


    <asp:Menu ID="menu" runat="server" StaticSelectedStyle-CssClass="selectedMenuItem">
    <Items>
        <asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx"></asp:MenuItem>
        <asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Services" NavigateUrl="~/Services.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Contact" NavigateUrl="~/Contact.aspx"></asp:MenuItem>
    </Items>
    </asp:Menu>

我希望根据 css 类 selectedMenuItem 设置所选菜单项的样式，但由于某种原因，这不会发生。我该如何解决这个问题？

【问题讨论】：

标签： asp.net menu

【解决方案1】：

我遇到了同样的问题，并试图找出发生了什么。在 thje html-page 的源代码中，我发现了这个：

<div class="menu" id="NavigationMenu">
    <ul class="level1">
        <li><a class="level1" href="../Default.aspx">Start</a></li>
        <!-- more li items with the same class -->
    </ul>

我期望我的 CssClass 名称，但找到了 level1。如果我将我的 css 更改为：

#NavigationMenu .level1 li
{
    padding: 10px;
}

成功了。可能不是正确的方法，但它是解决手头问题的方法。不幸的是，可能不适合在生产服务器上使用

【讨论】：

【解决方案2】：

您是否检查了您的浏览器源以确保 ASP.NET 没有动态重命名您的菜单控件 ID 值？

【讨论】：

【解决方案3】：

1- 定义 .selectedMenuItem 类如下，独立于 ID (#menu)

.selectedMenuItem {
        background: #FFFFFF;
        text-decoration: none;
        color: #333333;
}

2- 使用 jQuery 的 addClass 方法，将该方法绑定到菜单项的点击事件。

http://api.jquery.com/addClass/

【讨论】：

【解决方案4】：

您可以通过主文件的Page_Load 事件的代码来管理它。比如可以使用Request.Path方法获取当前页面Path，然后使用switch或者if语句手动将样式添加到对应的MenuItem中。

【讨论】：

【解决方案5】：

只需在样式表中添加此 css 即可显示带有背景图像的活动选项卡，或者还添加背景活动颜色，无需在菜单控件中进行任何更改并在菜单中添加任何静态或动态样式。

.menu a.static.selected
{
background: url("../images/bg.jpg") repeat scroll 0 0;
color: white;``
text-decoration: none; 
}
.menu li a.dynamic.selected
{

background: url("../images/bg.jpg") repeat scroll 0 0;
color: white;
text-decoration: none; 
}

【讨论】：