Question

我用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帮助程序的其他解决方案 - 但我认为如果我可以这样做，那就有点矫枉过正了。

提前谢谢。

Answer 1

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

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

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

您可以使用ViewBag发送所选菜单的ID，并使用id：hiddenId

在hiddenField中呈现它

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

但我建议使用innerHtml进行操作，然后jQuery函数应如下所示：

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

CSS导航菜单中的活动页面，背景图像用于MVC3中的悬停效果

1 个答案: