title: jquery tab like effect - show hide div on click
body: <p>I'm learning jquery, and I'm trying to create a tab like effect "upon click, only a single div should show at a time", I have wrote the following, but I don't feel its the correct way of doing things even tho the my code works. 
  Any idea how I can improve this? maybe make it a function? </p>
  
  <p>here is a working <a href="http://jsfiddle.net/amlife/opdzhzzz/" rel="nofollow"><strong>demo</strong></a> </p>
  
  <pre><code>$(document).ready(function(){
    $("#tabone").click(function(){
          $('#box-one').css("display", "block");
          $('#box-two').css("display", "none");
          $('#box-three').css("display", "none");
    });
  });
  
  $(document).ready(function(){
    $("#tabtwo").click(function(){
          $('#box-one').css("display", "none");
          $('#box-two').css("display", "block");
          $('#box-three').css("display", "none");
    });
  });
  
  $(document).ready(function(){
    $("#tabthree").click(function(){
          $('#box-one').css("display", "none");
          $('#box-two').css("display", "none");
          $('#box-three').css("display", "block");
    });
  });
  </code></pre>
  
  <p>Thank you</p>