Question

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

Home     Portfolio     About     Contact

为：

Home     {Portfolio}     About     Contact

此时，投资组合是活跃标记。

哦，并且提到它是一页滚动网站可能很重要吗？

Answer 1

取决于您所谓的活动。一旦识别出项目 - 您可以使用:before和:after伪类

通过纯CSS修改它

例如，此演示针对焦点元素执行此操作：http://jsfiddle.net/Y2rWJ/

Answer 2

这个jsFiddle演示了如何根据“活动”类添加“{”和“}”字符。我不确定菜单的HTML是什么，但我使用的HTML结构对于菜单来说是相当标准的。

这假设您有办法在活动菜单项上获得“活动”类（例如：在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: "}"; }

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

2 个答案: