2

我用 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 的解决方案 - 但我认为如果我能这样做，那就有点矫枉过正了。

先感谢您。

4

1 回答 1

0

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

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

在 someClass 中定义您选择的菜单选项卡样式。

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

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

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

$(function(){
    var id = $('hiddenId').val();
    var header =  $('#'+id).html();
    $('#'+id).html(header+'-on');
    });
于 2012-08-30T12:26:44.873 回答