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

Question

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

Did it get into the if statement?

Bla...
– Bla...

2016-05-15 07:56:59 +00:00
Commented May 15, 2016 at 7:56 — Bla...
– Bla..., Commented May 15, 2016 at 7:56
@user26409021- it is going into if statement

themaster
– themaster

2016-05-15 08:02:07 +00:00
Commented May 15, 2016 at 8:02 — themaster
– themaster, Commented May 15, 2016 at 8:02

Ben van Hartingsveldt 'Y' · Accepted Answer · 2016-05-15 07:59:58Z

1

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>

answered May 15, 2016 at 7:59

Ben van Hartingsveldt 'Y'

1241 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

themaster Over a year ago

Hi .. Actually it is not working completely ..On first click the other menus changes to inactive color and the one selected becomes active . But when I click on the other menu , the one already selected does not change color to inactive .

Ben van Hartingsveldt 'Y' Over a year ago

Could you post something on jsFiddle?

themaster Over a year ago

I am using a lot from java side and different js files . But for info ,I am using IE11 for testing. If you need any particular info?? ..I can share that with you.

themaster Over a year ago

Please find the current js and css which is getting used . This is currently not working .

Ben van Hartingsveldt 'Y' Over a year ago

Maybe it doesn't work because you have set background things in css class. Maybe it will work if you disable these.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related