2012-04-07 64 views
1

这里是在母版页选项卡:MVC样式的标签

<nav> 
    <ul id="menu"> 
     <li><%: Html.ActionLink("Home", "Index", "Home")%></li> 
     <li><%: Html.ActionLink("About", "About", "Home")%></li> 
    </ul> 
</nav> 

这里是CSS:

ul#menu li.selected a { 
    background-color: #a6e2a6; 
    color: #000; 
} 

但无论我做什么背景色,它始终保持一样。如何更改背景颜色和选定选项卡的高度?

回答

1

:active选择器不对与当前页面相对应的链接进行样式设置,但会对用户当前正在单击的链接进行样式设置。

:active选择器与:hover选择器非常相似,该选择器在用户将鼠标悬停在选择器上时设定链接的样式。它们都是响应鼠标操作的选择器。

下面是一个示例,显示的行为相当明显:你修改的问题http://jsfiddle.net/NuExP/

编辑后:

像@ o.v。表示,当前活动页面没有选择器,所以他的解决方案向链接添加一个类以表明它是当前活动页面是正确的。

+0

我编辑了这个问题。请看看它。 – 2012-04-07 08:16:59

+0

@JessevanAssen:对于OP的快速指针+1,虽然与':hover'的比较可能被看作是令人困惑的 – 2012-04-07 08:20:13

+0

我添加了它,因为两个选择器都响应鼠标操作,但现在我看到它可能会令人困惑。我将它添加到答案中。 – 2012-04-07 08:22:58

1

我假设你正试图改变当前选中的选项卡的样式?如果是这样,你应该添加一个类似.current服务器端的css类到其中一个选项卡(也可能需要样式li元素而不是其中的链接 - 但这一切取决于当前的css结构)

:active伪类用于a different purpose,例如,当您单击并按住锚点时,可以看到它适用。

+0

“选择”怎么样? – 2012-04-07 08:19:55

+0

@Scree:当前没有本地逻辑来使锚伪线类型的src与当前文档位置匹配。你最终必须添加一个类到服务器端(最好)的“当前”选项卡或在客户端使用JavaScript(通常皱眉) – 2012-04-07 08:23:48