CSS 导航菜单中的活动页面，带有 MVC3 中悬停效果的背景图像答案

【问题标题】：Active Page in CSS navigation menu with background images for hover effect in MVC3CSS 导航菜单中的活动页面，带有 MVC3 中悬停效果的背景图像
【发布时间】：2012-08-28 09:24:26
【问题描述】：

我用 HTML 制作了一个简单的菜单。它（几乎）完美地工作。如您所见，菜单项是与 CSS 中设置的背景图像的链接。鼠标悬停时会显示另一个背景图像。

我的问题是，我找不到用于设置菜单项不断“选择”的有效解决方案 - 或者换句话说，我不想在菜单中显示实际页面。

首先，我将展示 HTML 和 CSS。之后我会展示我尝试做的事情。

<div id="menu">
    <a href="@Url.Action("Index","Produkter")" id="menu_produkter"></a>
    <a href="@Url.Action("Index", "Galleri")" id="menu_galleri"></a>
    <a href="@Url.Action("Index", "Kontakt")" id="menu_kontakt"></a>
</div>

CSS 看起来像这样：

#menu_produkter 
{
    display: block;
    position: absolute;
    background: url(images/menu_produkter.png) no-repeat;
    width: 108px;
    height: 26px;
    margin-left: 376px;
    margin-top: 52px;
}

#menu_produkter:hover {
    background: url(images/menu_produkter_hover.png) no-repeat;
    cursor: pointer;
}

#menu_galleri {
    display: block;
    position: absolute;
    background: url(images/menu_galleri.png) no-repeat;
    width: 64px;
    height: 26px;
    margin-left: 496px;
    margin-top: 52px;
}

#menu_galleri:hover {
    background: url(images/menu_galleri_hover.png) no-repeat;
    cursor: pointer;
}

#menu_kontakt {
    display: block;
    position: absolute;
    background: url(images/menu_kontakt.png) no-repeat;
    width: 85px;
    height: 26px;
    margin-left: 572px;
    margin-top: 52px;
}

#menu_kontakt:hover {
    background: url(images/menu_kontakt_hover.png) no-repeat;
    cursor: pointer;
}

我尝试为每个名为 #menu_xxxx_on 的项目添加 CSS id，其背景图像与 ":hover" id 相同。

然后我在视图顶部设置 ViewBag.CurrentPage = "xxxx"。最后我使用 Razor 来检查当前是哪个页面：

$<a href="@Url.Action("Index", "Produkter")" id="menu_produkter@{if(ViewBag.CurrentPage.Equals("Salonen")) {<text>_on</text>}}"></a>*

我希望它会起作用 - 但菜单项却完全消失了。我试图用谷歌浏览器“检查元素”以找出问题所在。似乎它重置了所有 CSS 属性。

是否有任何简单的解决方案 - 或者我必须以其他方式解决？我已经看到其他使用自定义 html-helpers 的解决方案 - 但我认为如果我能这样做，那就有点矫枉过正了。

提前谢谢你。

【问题讨论】：

也许有人可以帮助我使用 jQuery 制作的解决方案。如果我为每个菜单项添加新 id，例如：#menu_kontakt_current {} 是否可以使用 removeAttr('id') 从“当前”菜单项中删除 id，然后为下一个“当前”菜单项添加新 id ?有人可以帮我解决这个问题吗？
我现在找到了解决方案。只需将 id 更改为 CSS 中的类，并使用与我描述的完全相同的方法。现在它正在工作。

标签： html asp.net-mvc-3 css razor

【解决方案1】：

如果你想用类来解决它，那么例如使用 jQuery 函数：

$(function(){
var id = $('hiddenId').val();
 $('#'+id).addClass("someClass");
});

在 someClass 中定义您选择的菜单标签样式。

您可以使用 ViewBag 发送所选菜单的 ID，并在 hiddenField 中使用 id 渲染它：hiddenId

@Html.Hidden("hiddenId",(object)ViewBag.CurrentPage)

但我建议用 innerHtml 操作，那么 jQuery 函数应该是这样的：

$(function(){
    var id = $('hiddenId').val();
    var header =  $('#'+id).html();
    $('#'+id).html(header+'-on');
    });

【讨论】：