Question

我需要一个java脚本代码来更改Onclick事件菜单的颜色。我使用xhtml作为UI（渲染为html）。当我点击特定菜单时，它的颜色应该变成任何其他颜色。

我搜索了答案但是，它们是基于网址更改。在我的情况下，网址将保持不变。

下面的示例javascript代码，用于更改菜单的颜色，但它不会改变非活动菜单的颜色。有什么简单的方法可以做到这一点吗？

MyXhtml -

<ice:panelGroup>
                    <li id="liHome" class="menu" onClick="changeColor(this);">
                        <ice:commandLink actionListener="#{menuBean.navigateToHomePage}" style="width: 34px;"
                            styleClass="curveLeft" id="lnkHome" name="lnkHome">
                            #{msgs['itrigger.menu.homePage.label']}
                        </ice:commandLink>
                    </li>
                </ice:panelGroup>

的Javascript

if (document.forms[2]) {

        var formId = document.forms[2].id;
        if(formId == 'errorMessagesForm') {
            formId = document.forms[3].id;
        }
        var selectedMenuObj;
        var selectedMenuLnkObj;
        if (formId) {
            if (formId == 'homeform') {
                document.getElementById('lihome').style.background = "lightgrey";
                document.getElementById('lihome').className = "selectedMenu";
            } else if ((formId == 'resourcesForm')) {
                document.getElementById('liResources').style.background = "lightgrey";
                document.getElementById('liResources').className = "selectedMenu";

        }
    }

CSS课程

ddsmoothmenu ul li a.selectedMenu:link {
    font-family: arial narrow;
    color: #717171;
    padding: 4px 20px 6px 10px;
    text-decoration: none;
    letter-spacing:1px;
    background-image:url(../images/Left_lightgrey_Menu-Tabs.png);
    background-repeat:no-repeat;
    background-position:left;
    width: 40px;    
    font-weight: bold;
}

Answer 1

做这样的事情：

<item class="item" onClick="changeColor(this);">Home</item>
<item class="item" onClick="changeColor(this);">Page 2</item>

<script>
function changeColor(elem){

var all = document.getElementsByClassName('item');

for(var i=0;i<all.length;i++){
all[i].style.background = 'inactive color';
}

elem.style.background = 'active color';

}
</script>

使用java脚本

1 个答案: