Question

我正在构建一个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 设置所选菜单项的样式，但由于某些原因不会发生。我该如何解决这个问题？

Answer 1

我遇到了同样的问题并试图找出发生的事情。在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;
}

它奏效了。可能不是正确的方法，但这是解决手头问题的方法。遗憾的是，可能不适合在生产服务器上使用

Answer 2

您是否修复了您的borwser源以确保ASP.NET没有动态重命名您的菜单控件ID值？

Answer 3

1-定义.selectedMenuItem类，如下所示，与ID（#menu）无关

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

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

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

Answer 4

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

Answer 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; 
}

StaticSelectedStyle-CssClass不起作用

5 个答案: