Asp.net выбранный пункт меню

ProgramBox

Asp.net выбранный пункт меню

Post author:admin
Запись опубликована:24 августа, 2022
Post category:Вопросы по программированию

#asp.net

Вопрос:

Я боролся с этим asp.net Проблема с управлением меню в течение нескольких дней, и это сводит меня с ума. Здесь код:

 <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" CssClass="hrMainMenu" DynamicHorizontalOffset="1" >
    <DynamicHoverStyle ForeColor="White" Font-Bold="True" />
    <DynamicMenuItemStyle ForeColor="White" />
    <DynamicMenuStyle Width="97px" HorizontalPadding="1px" />
    <DynamicSelectedStyle ForeColor="White" />
    <DynamicItemTemplate>
        <div class="dinamicMenuItemTemplate">
            <asp:Label ID="Label2" runat="server" Text='<%# Eval("Text") %>' EnableTheming="True"></asp:Label>
        </div>
    </DynamicItemTemplate>
    <StaticMenuItemStyle ForeColor="White" CssClass="StaticMenuItemStyle" />
    <StaticMenuStyle HorizontalPadding="10px" CssClass="StaticMenuStyle" />
    <StaticSelectedStyle CssClass="staticMenuItemTemplateSelected" ForeColor="Red" />
        <StaticItemTemplate>
            <div class="staticMenuItemTemplate">
                <div class="innerMenuElement">
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Text") %>'></asp:Label></div>
                </div>
        </StaticItemTemplate>
    </asp:Menu>

Теперь это мой css:

 .staticMenuItemTemplate 
{
    background-position: left;
    background-image: url('../../images/mainLayout/menuDefault.png');
    background-repeat: no-repeat;
    width: 100px;
    text-align: center;
    height: 25px;
    position: relative;
    top: 0px;
    left: 0px;
}
.staticMenuItemTemplate:hover
{
    background-image: url('../../images/mainLayout/menuHover.png');
    background-repeat: no-repeat;
    background-position: left;
    font-weight: bold;
}
.staticMenuItemTemplateSelected
{
    background-image: url('../../images/mainLayout/menuSelected.png') !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
    color: #FF00FF !important;
}

Я хочу отобразить другое изображение, когда выбран пункт меню (menuSelected.png), но, хотя класс staticMenuItemTemplate:hover , похоже, работает, и изображение действительно меняется, класс staticMenuItemTemplateSelected этого не делает. Только текст становится розовым, как указано, но изображение не изменится.

Спасибо за вашу помощь.

1. Вы уверены staticMenuItemTemplateSelected , что класс применяется к выбранному вами элементу (проверьте источник вывода HTML)? Кроме того, вы УВЕРЕНЫ, что выбранное изображение существует в этом пути? Появится ли он в браузере, если вы введете этот путь в адресную строку?

2. Что происходит при переходе .staticMenuItemTemplateSelected на .staticMenuItemTemplate:active ? Или когда вы указываете эти изменения в StaticSelectedStyle свойстве, а не в самом классе CSS?

3. Кроме того, я не уверен, была ли это ошибка копирования / вставки, но у вас отсутствует </div> тег в вашем StaticItemTemplate . Я не могу себе представить, что это причина ваших проблем, но тем не менее.

4. для Шона Стюарда применяется класс staticMenuItemTemplateSelected, потому что цвет шрифта меняется с красного на розовый правильно, и выбранные изображения существуют на моем пути, потому что они отображаются в браузере. Для jwiscarson, когда я переключился на:active или: focus или:link, это не сработало, потому что выбранное изображение отображалось только при нажатии на него, а затем исчезало. Все разделы были закрыты правильно. В любом случае спасибо за вашу заботу.

5. В StaticSelectedStyle я установил цвет переднего шрифта на красный, просто чтобы посмотреть, смогу ли я его переопределить, и он фактически становится розовым.

Ответ №1:

Я думаю, что проблема связана с тем, как HTML отображается для этого элемента управления. В моих тестах я получаю что-то вроде:

 <td>
  <a class="... staticMenuItemTemplateSelected ..." ...>
    <div class="staticMenuItemTemplate">
      <span>Menu text here</span>
    </div>
  </a>
</td>

Итак, вы можете видеть, что к <a> тегу применяется staticMenuItemTemplateSelected , но внутренний <div> получает класс staticMenuItemTemplate, который в конечном итоге переопределяет стиль staticMenuItemTemplateSelected, поскольку он более специфичен.

Если вы измените объявление .staticMenuItemTemplateSelected на

 .staticMenuItemTemplateSelected .staticMenuItemTemplate
{
    background-image: url('../../images/mainLayout/menuSelected.png') !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
    color: #FF00FF !important;
}

вы сделаете этот стиль более конкретным, чем стиль для .staticMenuItemTemplate, и он должен работать.

FireBug с FireFox — отличный инструмент для изучения проблем со странностями CSS.