如何在活动时更改菜单项的内容

Question

我想在菜单中激活时更改我的元素的实际内容。 FX来自：

Home  Portfolio  About  Contact 

到：

Home  {Portfolio}  About  Contact 

如果组合是在这个节骨眼有源标签。

噢，这可能很重要，要提到它是一个页面滚动网站？

Answer 1

此的jsfiddle演示了如何可以添加： - 一旦你确定了项目，你可以通过纯CSS使用:before和:after伪类

比如这个演示这样做是为了聚焦元素进行修改基于类“活动”的“{”和“}”字符。我不确定菜单的HTML是什么，但我使用的HTML结构对于菜单来说相当标准。

这假设你有一种方法来获得活动菜单项上的'active'类（例如：在jQuery“click”事件期间将类添加到链接）。如果您需要任何帮助，请在评论中提及一些内容。

http://jsfiddle.net/smclark89/hD6GW/

HTML

<ul class="myMenu"> 
    <li><a href="#">Home</a></li> 
    <li class="active"><a href="#">Portfolio</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

而对于CSS：

/* These set up the menu layout, unrelated to adding "{" and "}". */ 
.myMenu { list-style-type:none; } 
.myMenu li { display:inline-block; } 

/* These add a "{" and a "}" before and after the link. */ 
.myMenu li.active a:before { content: "{"; } 
.myMenu li.active a:after { content: "}"; } 

Answer 2

取决于您打电话的活动。 http://jsfiddle.net/Y2rWJ/