adding class active & removing default to the menu selected

Question

I have created web application where I want to highlight the menu selected.

Below is what I have

<div style="width: 80%;" align="left" >
    <span  style="display:inline-block;" align="left" >
        <div id="menubar" class="grid-block">
            <nav id="menu">
                <ul class="menu menu-dropdown ">
                    <li class="level1 item101 active">
                        <a href="index.xhtml" class="level1">
                            <span>
                                <span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center"> 
                                </span>
                                Home
                            </span>
                        </a>
                    </li>
                    <li class="level1 item102 parent makeSpace default" 
                        style="#{!PersonalInformationDataBean.pageViewData.contains('registerForPatentss') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('success') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('getReportss') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('searhPatentss')  ?'display:none':'display:inherit'};">
                        <a href="" class="level1 parent">
                            <span>
                                <span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center"> 
                                </span>Projects/Inventions
                            </span>
                        </a>
                        <div class="dropdown columns1">
                            <div class="dropdown-bg" style="overflow: hidden; width: 239px; height: 202px; ">
                                <div>
                                    <div class="width100 column">
                                        <ul class="level2">
                                            <li class="level2 item200" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('registerForPatentss')?'display:inherit':'display:none'}">
                                                <a href="registerForPatentss.xhtml" class="level2">
                                                    <span>Register New Applicant
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item201"  style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('success')?'display:inherit':'display:none'}">
                                                <a href="success.xhtml" class="level2">
                                                    <span>Register New Project
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item202" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('getReportss')?'display:inherit':'display:none'}">
                                                <a href="getReportss.xhtml" class="level2">
                                                    <span>Project Reports
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item203"  style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('searhPatentss')?'display:inherit':'display:none'}">
                                                <a href="searhPatentss.xhtml" class="level2">
                                                    <span>Search For Project
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>


                    <li class="level1 item102 parent makeSpace default"  style="#{!PersonalInformationDataBean.pageViewData.contains('systemLog') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('addUser') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('changePass') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:none':'display:inherit'}">
                        <a href="" class="level1 parent">
                            <span>
                                <span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center"> 
                                </span>Administrative
                            </span>
                        </a>
                        <div class="dropdown columns1">
                            <div class="dropdown-bg" style="overflow: hidden; width: 209px; height: 202px; ">
                                <div>
                                    <div class="width100 column">
                                        <ul class="level2">
                                            <li class="level2 item200" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('addUserss')?'display:inherit':'display:none'}">
                                                <a href="addUserss.xhtml" class="level2">
                                                    <span>Add User Account
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item201" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('logPatentSystemss')?'display:inherit':'display:none'}">
                                                <a href="logPatentSystemss.xhtml" class="level2">
                                                    <span>System Log
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item202" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('changePass')?'display:inherit':'display:none'}">
                                                <a href="changePass.xhtml" class="level2">
                                                    <span>Change Password
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item203" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:inherit':'display:none'}">
                                                <a href="userlistss.xhtml" class="level2">
                                                    <span>Details Of Registered Users
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </span>
</div>

This gives me output as below (its not same, but somewhat like this).

Home  |   Projects     |     Administrative
           |                  |
           |                  |
           |- Men 1           |- Ad 1
           |- Men 2           |- Ad 2
           |- Men 3           |- Ad 3

Now what I want to do is

1. When Men 1 is selected, <li class="level1 item102 parent makeSpace default" should change to <li class="level1 item102 parent makeSpace active" i.e. take out default and take in active class.

2. When I click on Ad 2, <li class="level1 item102 parent makeSpace default" should change to <li class="level1 item102 parent makeSpace active"

Any idea how to get this done? I check online, however examples I get was for Level 0 menu.

Answer 1

What I did is is below....

var myURL = window.location.toString();
var endIndex = myURL.lastIndexOf(".", myURL);
var startIndex = myURL.lastIndexOf("/")+1;
var pageAccessed = myURL.substr(startIndex, endIndex-startIndex);

if (pageAccessed=="successLoginss") {
$(".homemenu").addClass("active");
$(".homemenu").removeClass("default");
}

<li class="level1 item101 default homemenu">
    <a href="index.xhtml" class="level1">
        <span>
            <span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center"> 
            </span>
            Home
        </span>
    </a>
</li>

Dats it..... I know this is not right way, but I had to get done this way....

Answer 2

See The demo

jQuery:

$("#menubar").on("click","li",function(e){
      e.preventDefault();
      e.stopPropagation();


      if($(this).hasClass("active"))
      {
        $(this).removeClass("active").addClass("default");

      }
      else
      {
                $(this).addClass("active").removeClass("default");
      }

    });