StaticSelectedStyle-CssClass не работает

Question

Я создаю веб-приложение ASP.NET 4.0, в котором у меня есть элемент управления меню следующим образом:

   #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-страницы я нашел это:

<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

просто добавьте этот 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; 
}

Answer 3

Вы можете управлять этим из кода позади события Page_Load Мастер-файла.Например, вы можете использовать метод Request.Path, чтобы получить путь к текущей странице, а затем использовать переключатель или оператор if, чтобы вручную добавить стиль к соответствующему MenuItem.

.

Answer 4

1 - Определите класс .selectedMenuItem, как показано ниже, независимо от идентификатора (#menu)

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

2 - Используйте метод addClass jQuery, привяжите этот метод к событию click пунктов меню.

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

Answer 5

Вы проверяли источник в borwser, чтобы убедиться, что ASP.NET не динамически переименовывает значение идентификатора элемента управления меню?