页面页码点击后变色

Question

 <div class="page_number">
     <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
           <li><a href="#">></a></li>
      </ul>
 </div>
<script type="text/javascript">
 $(document).ready(function(){
   $(".page_number ul li a").each(function(){
    $(this).click(function(){$(this).css("background","blue");});

   });
 });
</script>
// 怎么样能让点击后变色，点击的时候只有当前页面页码变色。点击的时候非当前页面的页码没有背景.

Answer 1

  <div class="page_number">
     <ul>
          <li><a href="#" id="page1">1</a></li>
          <li><a href="#" id="page2">2</a></li>
          <li><a href="#" id="page3">3</a></li>
          <li><a href="#" id="page4">4</a></li>
           <li><a href="#" id="pageN">></a></li>
      </ul>
 </div>
$(document).ready(function(){
    var curPage = 0;
     $(".page_number ul li a").each(function(){
          $(this).click(function(){
              $(this).css("background","blue");
              if(curPage != 0){
                  $("#"+curPage).css("background","");
              }
              curPage = $(this).attr("id");
          });
     });
});