title: How to set the selected menu highlighted after page refresh
body: <p>I have got a task to do horizontal menu.Here I have a problem with the selection of menu.This is my code.But after page refresh the selected menu will disappear.How can i solve this?</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
    .menu{width: 300px; height: 25; font-size: 18px;}
    .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;}
    .menu li:hover, .menu li.active {
          background-color: #f90;
      }
  &lt;/style&gt;
  
  &lt;ul class="menu"&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li class="active"&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
  &lt;li&gt;Item 4&lt;/li&gt;
  &lt;li&gt;Item 5&lt;/li&gt;
  &lt;li&gt;Item 6&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var make_button_active = function()
  {
      var siblings =($(this).siblings());
  
      siblings.each(function (index)
      {
        $(this).removeClass('active');
      }
    )
  
  
      $(this).addClass('active');
  }
  
  $(document).ready(
    function()
    {
      $(".menu li").click(make_button_active);
    }  
  )
  
  &lt;/script&gt;
  </code></pre>