title: Keep selected menu active after postback
body: <p>How do I keep the menu selected stay active even after postback? Below are coding that I currently use.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="menu-promo"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;menu1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;menu2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;menu3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;menu4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#menu-promo {background-color: #ff9100; display: inline-block; font-family: Calibri; width: 100%; padding: 45px 20px 20px 20px; border: 1px 0px 0px 0px solid #b3e5fc; font-weight: bold; color: #fff!important;}
  #menu-promo ul {margin: 0; padding: 0; text-align: center; display: block;}
  #menu-promo ul &gt; li {list-style: none; display: inline-block;}
  #menu-promo ul &gt; li a {color: #fff; border: 2px solid #ff9100; border-radius: 20px; padding: 10px 20px 10px 20px; text-decoration: none;}
  #menu-promo ul &gt; li a:hover {background-color: #eeeeee; border: 2px solid #01579b; cursor: pointer; color: #01579b; text-decoration: none;}
  #menu-promo ul li a.active {background-color: #eeeeee; border: 2px solid #01579b; cursor: pointer; color: #01579b; text-decoration: none;}
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function () {
      var selector = '#menu-promo ul li a';
  
      $(selector).on('click', function () {
          $(selector).removeClass('active');
          $(this).addClass('active');
      });
  });
  </code></pre>