gpt4 book ai didi

css - 识别当前选定列表项的 Facelets 策略

转载 作者:行者123 更新时间:2023-11-28 11:49:02 24 4
gpt4 key购买 nike

我正在寻找一种策略来避免在我的网站上重复代码。

问题是我有一个无序列表,它在我编码的每个页面中重复出现。原因是我有一个列表项,其中包含一个用于标识当前页面的 anchor 。在我编码的每个页面中都重复了这一点。原因是我有一个列表项,其中包含一个用于标识当前页面的 anchor 。这允许我使用 css 对其进行 hilite。

我如何定义这样一个列表,以便我可以在 facelets 中动态更改它?

<ui:define name="leftBar">
<ul class="leftNav">
<li id="home"><a id="**currentPage**" jsfc="h:link" outcome="home">#{global.homeInCaps}</a></li>
<li id="about"><a jsfc="h:link" outcome="about">#{global.aboutInCaps}</a></li>
<li id="blog"><a jsfc="h:link" outcome="blog">#{global.blogInCaps}</a></li>
<li id="tutorials"><a jsfc="h:link" outcome="tutorials">#{global.tutorialsInCaps}</a>
<ul class="leftSubNav">
<li><a jsfc="h:link" outcome="java">#{global.javaNormal}</a>
<ul class="leftSubNav">
<li><a jsfc="h:link" outcome="setupPath">#{global.path}</a></li>
</ul>
</li>
<li><a jsfc="h:link" outcome="ubuntu">#{global.ubuntuNormal}</a></li>
<li><a jsfc="h:link" outcome="virtualbox">#{global.virtualBoxNormal}</a></li>
</ul>
</li>
<li id="contact"><a jsfc="h:link" outcome="contact">#{global.contactInCaps}</a></li>
</ul>

</ui:define>

最佳答案

在 JSF 中,您可以通过以下方式获取当前 View ID

#{facesContext.viewRoot.viewId}

它将返回 View 文件的 webcontent 相对路径,例如/home.xhtml, /about.xhtml等。可以借助EL中的条件运算符设置类名进行测试。

<ui:param name="view" value="#{facesContext.viewRoot.viewId}" />

<li id="home"><a jsfc="h:link" outcome="home" class="#{view == '/home.xhtml' ? 'current' : ''}">#{global.homeInCaps}</a></li>
<li id="about"><a jsfc="h:link" outcome="about" class="#{view == '/about.xhtml' ? 'current' : ''}">#{global.aboutInCaps}</a></li>
<li id="blog"><a jsfc="h:link" outcome="blog" class="#{view == '/blog.xhtml' ? 'current' : ''}">#{global.blogInCaps}</a></li>
...

然后您可以使用 CSS 为表示当前页面的链接设置样式

.leftNav .current {
color: pink;
}

leftNav 不应该是 id 吗?

关于css - 识别当前选定列表项的 Facelets 策略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7145684/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com