title: How to apply CSS for the menu while selecting?
body: <p>I have a task to highlight the menu as selected while loading the page. For that I have the following code:</p>
  
  <pre><code>$('.menuHeader').each(function () {
      $(this).attr('id', 'menu' + ($(this).index() + 1));
      $(this).val($(this).index() + 1);
  
      // Set the dynamic ids for links
      $(this).find('a').attr('id', 'link' + ($(this).index() + 1));
      //alert('New ID  :  ' + $(this).find('a').attr('id'));
  });
  
  $('.menuHeader a').click(function () {
      alert("a");
      $('.menuHeader a').removeClass('menuHeaderActive');
      $(this).parent().parent(".menuHeader").addClass('menuHeaderActive');
  });
  </code></pre>
  
  <p>But when I select the second menu, it's refreshed and missing the selection.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="menuBar"&gt;
      &lt;div class="menuHeader ui-corner-top menuHeaderActive"&gt;
          &lt;span&gt;&lt;a href="#" onclick="Home()"&gt;Home&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="menuHeader ui-corner-top"&gt;
          &lt;span&gt;&lt;a href="#" onclick="NewTransaction()"&gt;New Transaction&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I solve this problem?</p>
  
  <pre><code> function Home() {
              window.location.href = "../../home/welcome";
          }
          function NewTransaction() {
              window.location.href = "../../EnergyCatagory/index";
          }
  </code></pre>