CODEWITHSUNDEEP
javascripthtmlcss
themaster
themaster

Reputation: 473

Changing colour of the menu tab at onClick event using java script

I need a java script code to change the color of menu on Onclick event . I am using xhtml for the UI(rendered to html) .when I click on the particular menu ,its color should change to any other color.

I searched for the answers but , they are based on URL change .In my case the URL will remain the same .

Below sample javascript code for changing the color of the menu ,but it doesn't change the color of the inactive menus .Any easy way to do this?

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 class

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;
}

Upvotes: 0

Views: 1362

Answers (1)

Ben van Hartingsveldt &#39;Y&#39;
Ben van Hartingsveldt &#39;Y&#39;

Reputation: 114

Do something like this:

<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>

Upvotes: 1

Related Questions