如何在活動時更改菜單項的內容

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/