title: adding class active & removing default to the menu selected
body: <p>I have created web application where I want to highlight the menu selected.</p>
  
  <p>Below is what I have</p>
  
  <pre><code>&lt;div style="width: 80%;" align="left" &gt;
      &lt;span  style="display:inline-block;" align="left" &gt;
          &lt;div id="menubar" class="grid-block"&gt;
              &lt;nav id="menu"&gt;
                  &lt;ul class="menu menu-dropdown "&gt;
                      &lt;li class="level1 item101 active"&gt;
                          &lt;a href="index.xhtml" class="level1"&gt;
                              &lt;span&gt;
                                  &lt;span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center"&gt; 
                                  &lt;/span&gt;
                                  Home
                              &lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="level1 item102 parent makeSpace default" 
                          style="#{!PersonalInformationDataBean.pageViewData.contains('registerForPatentss') &amp;amp;&amp;amp; !PersonalInformationDataBean.pageViewData.contains('success') &amp;amp;&amp;amp; !PersonalInformationDataBean.pageViewData.contains('getReportss') &amp;amp;&amp;amp; !PersonalInformationDataBean.pageViewData.contains('searhPatentss')  ?'display:none':'display:inherit'};"&gt;
                          &lt;a href="" class="level1 parent"&gt;
                              &lt;span&gt;
                                  &lt;span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center"&gt; 
                                  &lt;/span&gt;Projects/Inventions
                              &lt;/span&gt;
                          &lt;/a&gt;
                          &lt;div class="dropdown columns1"&gt;
                              &lt;div class="dropdown-bg" style="overflow: hidden; width: 239px; height: 202px; "&gt;
                                  &lt;div&gt;
                                      &lt;div class="width100 column"&gt;
                                          &lt;ul class="level2"&gt;
                                              &lt;li class="level2 item200" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('registerForPatentss')?'display:inherit':'display:none'}"&gt;
                                                  &lt;a href="registerForPatentss.xhtml" class="level2"&gt;
                                                      &lt;span&gt;Register New Applicant
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li class="level2 item201"  style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('success')?'display:inherit':'display:none'}"&gt;
                                                  &lt;a href="success.xhtml" class="level2"&gt;
                                                      &lt;span&gt;Register New Project
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li class="level2 item202" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('getReportss')?'display:inherit':'display:none'}"&gt;
                                                  &lt;a href="getReportss.xhtml" class="level2"&gt;
                                                      &lt;span&gt;Project Reports
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li class="level2 item203"  style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('searhPatentss')?'display:inherit':'display:none'}"&gt;
                                                  &lt;a href="searhPatentss.xhtml" class="level2"&gt;
                                                      &lt;span&gt;Search For Project
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
  
  
                      &lt;li class="level1 item102 parent makeSpace default"  style="#{!PersonalInformationDataBean.pageViewData.contains('systemLog') &amp;amp;&amp;amp; !PersonalInformationDataBean.pageViewData.contains('addUser') &amp;amp;&amp;amp; !PersonalInformationDataBean.pageViewData.contains('changePass') &amp;amp;&amp;amp; !PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:none':'display:inherit'}"&gt;
                          &lt;a href="" class="level1 parent"&gt;
                              &lt;span&gt;
                                  &lt;span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center"&gt; 
                                  &lt;/span&gt;Administrative
                              &lt;/span&gt;
                          &lt;/a&gt;
                          &lt;div class="dropdown columns1"&gt;
                              &lt;div class="dropdown-bg" style="overflow: hidden; width: 209px; height: 202px; "&gt;
                                  &lt;div&gt;
                                      &lt;div class="width100 column"&gt;
                                          &lt;ul class="level2"&gt;
                                              &lt;li class="level2 item200" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('addUserss')?'display:inherit':'display:none'}"&gt;
                                                  &lt;a href="addUserss.xhtml" class="level2"&gt;
                                                      &lt;span&gt;Add User Account
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li class="level2 item201" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('logPatentSystemss')?'display:inherit':'display:none'}"&gt;
                                                  &lt;a href="logPatentSystemss.xhtml" class="level2"&gt;
                                                      &lt;span&gt;System Log
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li class="level2 item202" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('changePass')?'display:inherit':'display:none'}"&gt;
                                                  &lt;a href="changePass.xhtml" class="level2"&gt;
                                                      &lt;span&gt;Change Password
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li class="level2 item203" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:inherit':'display:none'}"&gt;
                                                  &lt;a href="userlistss.xhtml" class="level2"&gt;
                                                      &lt;span&gt;Details Of Registered Users
                                                      &lt;/span&gt;
                                                  &lt;/a&gt;
                                              &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This gives me output as below (its not same, but somewhat like this).</p>
  
  <pre><code>Home  |   Projects     |     Administrative
             |                  |
             |                  |
             |- Men 1           |- Ad 1
             |- Men 2           |- Ad 2
             |- Men 3           |- Ad 3
  </code></pre>
  
  <p>Now what I want to do is</p>
  
  <ol>
  <li><p>When Men 1 is selected, <code>&lt;li class="level1 item102 parent makeSpace default"</code> should change to <code>&lt;li class="level1 item102 parent makeSpace active"</code> i.e. take out <code>default</code> and take in <code>active</code> class.</p></li>
  <li><p>When I click on <code>Ad 2</code>, <code>&lt;li class="level1 item102 parent makeSpace default"</code> should change to <code>&lt;li class="level1 item102 parent makeSpace active"</code></p></li>
  </ol>
  
  <p>Any idea how to get this done? I check online, however examples I get was for Level 0 menu.</p>