访问新的JavaServerFaces（jsf）页面后丢失css样式（使用jquery）

我有一个关于在java服务器中使用jquery的css样式的问题。 以下是我的密码

在template.xhtml中

<h:head>       
    <h:outputStylesheet name="./css/default.css" />
    <h:outputStylesheet name="./css/cssLayout.css"/>
    <h:outputScript name="./js/common.js"/>
    <title><ui:insert name="title"></ui:insert></title>
</h:head>

<ui:insert name="top" id="topui">
            <div id="topContent" >
                <h:form id="logo">

                    <span id="in" style="font-size: 33px; font-weight: bold;">Por 
                        <span style="color: rgb(255, 180, 0);">Permpol</span></span>
                    <div style="margin-left: 86px; color: gray; font-size: small;">
                        Organic Fertilizer
                    </div>
                </h:form>

                <h:form id="topnav">
                    <div id="nav">
                    <ul>
                        <li class="topli"><h:commandLink id="home" 
                             styleClass="topnavLinks" value="#{msg['home']}"  action="/index?faces-redirect=true" /></li>
                        <li class="topli"><h:commandLink styleClass="topnavLinks" value="#{msg['products']}" action="/products?faces-redirect=true"/></li>
                        <li class="topli"><h:commandLink styleClass="topnavLinks" value="#{msg['production']}" action="/production?faces-redirect=true" /></li>
                        <li class="topli" id="lang"><h:commandLink styleClass="aboutLink" value="#{msg['lang']}" title="click to change language"/>
                            <ul>
                                <li><h:commandLink id="en" styleClass="langsubmenu" actionListener="#{language.countryLocaleCodeChanged}" value="#{msg['eng']}&nbsp;●"/></li>
                                <li><h:commandLink id="th" styleClass="langsubmenu" actionListener="#{language.countryLocaleCodeChanged}" value="#{msg['thai']}&nbsp;●"/></li>
                            </ul>
                        </li>
                        <li class="topli" id="about"><h:commandLink styleClass="aboutLink" value="#{msg['about_us']} ▾"/>
                            <ul>
                                  <li><h:commandLink styleClass="submenu" value="#{msg['our_company']}  " action="/aboutus?faces-redirect=true" /></li>
                                <li><h:commandLink styleClass="submenu" value="#{msg['our_customers']}" action="/customers?faces-redirect=true"/></li>
                                <li><h:commandLink styleClass="submenu" value="#{msg['hallmark']}" action="/hallmark?faces-redirect=true"/></li>
                            </ul>
                        </li>
                    </ul>
                    </div>
                </h:form>                

            </div>

        </ui:insert>

当我选择一个菜单项（属于“topnavLinks”类）时，我希望所选菜单项为红色，而其他菜单项为白色

根据这段代码，当我单击一个菜单项时，所选项的字体颜色变为红色，但当jsf页面成功加载时，css样式将丢失

有人知道问题出在哪里吗？ 不相关的一点：要实现这一点，有必要使用javascript（或jquery）吗？jsf有这样做的功能吗

---

谢谢

当您转到另一个页面时，无论您在Javascript中做什么，Javascript都会更改当前页面的DOM。如何做到这一点实际上取决于您实际必须实现什么，您可以将突出显示项的信息存储在cookie、会话、数据库等中。。。然后在页面加载时检索它，并使用javascript代码为链接上色感谢您的回答。基本上，我可以创建会话范围的托管bean来存储当前状态，对吗？是否可以通过非javascript方式（仅使用jsf组件）实现这一点？也许，我自己从未使用过jsf标记库。。。

$(document).ready(function() {
    $(".topnavLinks").click(function() {
        $(this).css("color", "red");
        $(".topnavLinks").not(this).css("color", "white");
    });
});