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

我用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>

我尝试为每个名为#menu_xxxx_的项目添加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>*

$*

我希望它能起作用，但菜单项却完全消失了。我试着用谷歌Chrome“检查元素”，找出哪里出了问题。它似乎重置了所有CSS属性

有什么简单的解决方法吗？或者我必须用另一种方法来解决？我也看到过其他使用自定义html助手的解决方案，但我认为如果我可以这样做，那就有点过头了

---

提前感谢您。

如果您想用类解决它，请使用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');
    });

---

如果要使用类来解决它，请使用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');
    });

---

也许有人能帮我用jQuery做一个解决方案。如果我为每个菜单项添加新id，如：#menu kontakt_current{}是否可以使用removeAttr（'id'）从“当前”菜单项中删除id，然后为下一个“当前”菜单项添加新id？有人能帮我做这个把戏吗？我现在找到了解决办法。简单地将id更改为CSS中的类，并使用与我描述的完全相同的方法。现在它开始工作了。也许有人能帮我用jQuery做一个解决方案。如果我为每个菜单项添加新id，如：#menu kontakt_current{}是否可以使用removeAttr（'id'）从“当前”菜单项中删除id，然后为下一个“当前”菜单项添加新id？有人能帮我做这个把戏吗？我现在找到了解决办法。简单地将id更改为CSS中的类，并使用与我描述的完全相同的方法。现在它开始工作了。