jQuery static menu too much code

jQuery static menu too much code

Hi, I just started with jQuery and I wanted to do a website with 4 menu buttons and after I click them only content div will change. So i did something but I have too many lines of code for this simple task. I hope somebody can explain me how to to thing more efficiently.
This is my index.html page

  2. <!doctype html>
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     <link type="text/css" rel="stylesheet" href="style.css">
  7.     <title>Rainer TestPage</title>
  8.     <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  9. <script type="text/javascript" src="script.js"></script>
  10.   </head>
  11.   <body>
  12. <div id="header">
  13. <div id="menubar">
  14. <div id="home">
  15. Home
  16. </div>
  17. <div id="images">
  18. Images
  19. </div>
  20. <div id="contact">
  21. Contact
  22. </div>
  23. <div id="other">
  24. Other
  25. </div>
  26. </div>
  27. </div>
  28. <div id="content">
  29. <div id="homecontent">
  30. Home content goes here!
  31. </div>
  32. <div id="imagescontent">
  33. Images content goes here!
  34. </div>
  35. <div id="contactcontent">
  36. Contact content goes here!
  37. </div>
  38. <div id="othercontent">
  39. Other content goes here!
  40. </div>
  41. </div>
  42. <div id="footer">
  44. </div>
  45.   </body>
  46. </html>
This is my style.css

  2. #header 
  3. {
  4. position:absolute;
  5. height:100px;
  6. left:0;
  7. top:0;
  8. width:100%;
  9. background:gold;
  10. }

  12. #footer
  13. {
  14. position:absolute;
  15. height:50px;
  16. left:0;
  17. bottom:0;
  18. width:100%;
  19. background:blue;
  20. }

  22. #content
  23. {
  24. position:absolute;
  25. top:100px;
  26. bottom:50px;
  27. left:0;
  28. width:100%;
  29. background:red;
  30. }

  32. #menubar
  33. {
  34. margin:auto;
  35. width:30%;
  36. }

  38. #home,
  39. #images,
  40. #contact,
  41. #other
  42. {
  43. text-align:center;
  44. border-style:solid;
  45. border-width:1px;
  46. float:left;
  47. font-size:20pt;
  48. margin-right:1px;
  49. margin-top:30px;
  50. width:100px;
  51. height:50px;
  52. background:lightyellow;
  53. }

And script.js

  2. $(document).ready(function(){
  3. //Hide all content but home
  4. $("#imagescontent").hide();
  5. $("#contactcontent").hide();
  6. $("#othercontent").hide();
  7. //Home tab stuff
  8. $("#home").mouseenter(function(){
  9. $("#home").css("background","lightsalmon");
  10. });
  11. $("#home").mouseleave(function(){
  12. $("#home").css("background","lightyellow");
  13. });
  14. $("#home").click(function(){
  15. $("#homecontent").show();
  16. $("#imagescontent").hide();
  17. $("#contactcontent").hide();
  18. $("#othercontent").hide();
  19. });
  20. // Images tab stuff
  21. $("#images").mouseenter(function(){
  22. $("#images").css("background","lightsalmon");
  23. });
  24. $("#images").mouseleave(function(){
  25. $("#images").css("background","lightyellow");
  26. });
  27. $("#images").click(function(){
  28. $("#homecontent").hide();
  29. $("#imagescontent").show();
  30. $("#contactcontent").hide();
  31. $("#othercontent").hide();
  32. });
  33. // Contact tab stuff
  34. $("#contact").mouseenter(function(){
  35. $("#contact").css("background","lightsalmon");
  36. });
  37. $("#contact").mouseleave(function(){
  38. $("#contact").css("background","lightyellow");
  39. });
  40. $("#contact").click(function(){
  41. $("#homecontent").hide();
  42. $("#imagescontent").hide();
  43. $("#contactcontent").show();
  44. $("#othercontent").hide();
  45. });
  46. // Other tab stuff
  47. $("#other").mouseenter(function(){
  48. $("#other").css("background","lightsalmon");
  49. });
  50. $("#other").mouseleave(function(){
  51. $("#other").css("background","lightyellow");
  52. });
  53. $("#other").click(function(){
  54. $("#homecontent").hide();
  55. $("#imagescontent").hide();
  56. $("#contactcontent").hide();
  57. $("#othercontent").show();
  58. });
  59. });

And also I have a problem with centering the button text in the middle. Right now it looks like it is vertically top bot how can I put it in the middle.
Sorry about my english, it is my second language.