$(function() {
    $(".menu li").click(function() {
        setTimeout(function() {
            var page = $.QueryString("page");
            $(".menu li").removeClass("active");
            $(".menu li:eq(" + page + ")").addClass("active");
        }, 200);
    });

});

Setting Validate Copy Format

ul.menu{
  border:1px solid #112266;
  background:#ccc;
}
ul.menu li{
  list-style:none;
  display:inline-block;
  margin-left:10px;
  padding:0px;
  width:60px;
  text-align:center;
}
ul.menu li:hover{
  background:#343434;
}
ul.menu li a{
  padding:0px;
  color:#113399;
  text-decoration:none;
}
ul.menu li:hover a{
  color:#c6b744;
  text-decoration:underline;
}
ul.menu li.active{
  background:#343434;
}
ul.menu li.active a{
  color:#c6b744
}

Setting Validate Copy Format

<div id="panel">
  <ul class="menu">
    <li>
      <a href="#?page=0">
        Index
      </a>
    </li>
    <li>
      <a href="#?page=1">
        About
      </a>
    </li>
    <li>
      <a href="#?page=2">
        Test
      </a>
      <li>
    </ul>
</div>

Copy Format

Download